我正在尝试在我正在处理的网站上为块引用定义全局样式。
目标是设置块引用的样式,使它们看起来类似于下图。我想避免修改 DOM 结构。
使用伪类我想在元素上方和下方显示水平平行边框,但线条应该只有元素本身的一半宽并且水平居中。
这是我到目前为止所获得的,但线条没有正确居中。
blockquote {
margin: 0 auto;
position: relative;
text-align: center;
display: table;
font-size: 15px;
}
blockquote:before {
content: '\A';
height: 1px;
width: 40%;
position: absolute;
background: #000;
top: -8px;
}
blockquote:after {
content: '\A';
height: 1px;
width: 40%;
position: absolute;
background: #000;
bottom: -8px;
}
<blockquote>
Neque porro quisquam e porro quisquest qui dolorem ipsum quia dolor sit<br />
est qui dolorem ipsum quia dolor sit amet rem ipsum quia
</blockquote>