我正在尝试为我正在处理的网站上的块引用定义全局样式。
目标是设置块引号的样式,使它们看起来与下图相似。我想避免修改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>
答案 0 :(得分:10)
如果宽度固定,您可以使用负边距 - 左对中元素。在您的情况下margin-left: -20%;
:
blockquote {
margin: 0 auto;
position: relative;
text-align: center;
display: table;
font-size: 15px;
}
blockquote:before, blockquote:after {
content: '';
position: absolute;
top: 0;
left: 50%; /* <-- put left edge in the middle */
margin-left: -20%; /* <-- shift to the left by half of the width */
width: 40%;
height: 1px;
background: #000;
}
blockquote:after {
top: inherit;
bottom: 0;
}
<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>