Question

我想在伪元素之后的内容属性值的左右两侧添加填充..

html是 -

<div class="header-contact">
    <p>Mail: info@domain.com</p>
    <p>Tel: xxxxx xxxxxxxx</p>
</div>

和css是 -

.header-contact p{
     float:right;
     padding-left:10px;
     position:relative;
}
.header-contact p:last-child:after{

     content:"|"; //i want to add padding to its right and left

     position:absolutes;
}

Answer 1

不确定这是否是你想要的。您需要在伪元素上应用display:block或display:inline-block属性，以便使用填充进行渲染：

.header-contact p:last-child:after{
     content:"|"; 
     padding:0 10px;
     display:inline-block;
}

JSFIDDLE

Answer 2

你可以试试这个：

＆＃13;

.header-contact p{
 float: right;
}
.separator{
    padding: 0 10px;
}

＆＃13;

<div class="header-contact">
    <p>Mail: info@domain.com</p>
    <p>Tel: xxxxx xxxxxxxx</p>
</div>

＆＃13;

Working code

如何在伪元素之后和之前的内容中向左和向右添加填充

2 个答案: