CODEWITHSUNDEEP
htmlcss
shahid hasan
shahid hasan

Reputation: 1

how to add padding to left and right to the content of after and before pseudo element

i want to add padding to left and right of the value of content property of before, after pseudo element..

html is-

<div class="header-contact">
    <p>Mail: [email protected]</p>
    <p>Tel: xxxxx xxxxxxxx</p>
</div>

and css is-

.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;
}

Upvotes: 0

Views: 108

Answers (2)

Mohammed Raja
Mohammed Raja

Reputation: 207

You can try this:

.header-contact p{
 float: right;
}
.separator{
    padding: 0 10px;
}
<div class="header-contact">
    <p>Mail: [email protected]</p>
    <p>Tel: xxxxx xxxxxxxx</p>
</div>

Working code

Upvotes: -1

Slavenko Miljic
Slavenko Miljic

Reputation: 3846

Not sure if this is what you wanted. You need to apply display:blockor display:inline-block property on the pseudo element, for it to render with padding:

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

JSFIDDLE

Upvotes: 2

Related Questions