React.js中带有水平线的标题

Question

我正在尝试在React.js中创建自定义标头。我在this JSFiddle中有一个工作原型。

问题是，React与css伪元素配合得不好，所以按照this的建议，我试图＆＃34;翻译＆＃34;它进入React组件：

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>

这不能按预期工作 - 水平线放在屏幕上的某个位置，并且它们没有内嵌标题。有没有办法让它变得更好？