1

I am trying to create custom header in React.js. I have a working prototype in this JSFiddle.

The problem is, React does not go well with css pseudo-elements, so following this advice I tried to "translate" it into React component:

var lineAfterStyle = {
    position: 'absolute',
    top: '51%',
    overflow: 'hidden',
    width: '50%',
    height: '1px',
    content: '\a0',
    backgroundColor: 'red'
};

var lineBeforeStyle = {
    position: 'absolute',
    top: '51%',
    overflow: 'hidden',
    width: '50%',
    height: '1px',
    content: '\a0',
    backgroundColor: 'red',
    marginLeft: '-50%',
    textAlign: 'right',
};

......

<div>
    <div style={lineBeforeStyle} />
    <h1 style={headerStyle}>Hello World!</h1>
    <div style={lineAfterStyle} />
</div>

This does not work as expected--horizontal lines are placed somewhere on the screen and they are NOT inlined with the header. Is there any way to make it better?

Community
  • 1
  • 1
TheMP
  • 8,257
  • 9
  • 44
  • 73
  • "Improving" code is perhaps not best placed on Stack Overflow. Perhaps [**CodeReview**](http://codereview.stackexchange.com/) but ***check their guidelines first***. – Paulie_D Dec 07 '15 at 13:03
  • The wording somewhat implies Code Review, alas it is not a good fit. The cardinal rule of Code Review is that **code must already be working as intended**, which is not true here. – Kaz Dec 07 '15 at 13:05
  • Well, unfortunatelly this code is NOT working as expected, because I am not getting horizontal lines in place for React.js version. Maybe I should rephrase my question. – TheMP Dec 07 '15 at 13:06
  • Have you managed to make it work? I can't figure out how to put a horizontal line in jsx. – newguy Nov 27 '17 at 05:20

0 Answers0