:Before,: After and Padding

:before, :after and padding

I tend to use absolute positioning for :before and :after elements. Then you can do whatever you want to the parent without worrying about your pseudo elements going anywhere (unless, of course, you move the element itself).

View on JSFiddle

HTML

<div></div>

CSS

div {
  position: relative;
  background: #eee;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 30px;
}
div:before {
  position: absolute;
  width: 10px;
  height: 25px;
  top: 0;
  left: -10px;
  content:"";
  background: #222;
}
div:after {
  position: absolute;
  width: 10px;
  height: 25px;
  top: 0;
  right: -10px;
  content:"";
  background: #222;
}

This shows how I would lay them out. You can then use any method you want to adjust the position of the text in the parent.

The key points of the above code are the following:

1. The parent is relatively positioned. This allows us to use absolute positioning on its children, the pseudoelements, to place them in relation to their parent.
2. The left and right position of the before and after elements, respectively, is equal to their width if you want the elements to be border-to-border.

If you want to center the text in the parent div vertically, and it's just a single line, you can set the line-height equal to the height of the container. View that here. This would be better than 'guessing' the padding to make it vertically centered, if that's what you're going for.

Of course, there are other ways to center the text vertically, too, and accordingly there are lots of SO questions on the subject. Here's just one.

how to add padding top in CSS pseudo element class::after

Your :after is set by default to display: inline so padding has no effect on it. Change it to inline-block or block and then it will.

To center it (as requested in comments), use flex on the div as below:

div {  width: 50px;  height: 50px;  background: green;  display: flex;  justify-content: center;}
div:after {  content: "";  width: 20px;  height: 20px;  background: blue;  display: inline-block;  padding-top: 5px;}

<div></div>

Using ::after and ::before to go outside padding bounds

You can specify padding and margin but make them 0 visually by considering the same amount of padding as negative margin then relies on some background coloration:

.box {  width: 100px;  height: 100px;  margin: -20px 0 0 -20px;  padding: 20px 0 0  20px;  background:     /* Top red line (width:80% height:20px) */    linear-gradient(red,red) 0 0/80% 20px,    /* left red line (width:20px height:80%)*/    linear-gradient(red,red) 0 0/20px 80%,    /* Main background; color only the content area (not the padding)*/    rgba(80,150,220,1) content-box;  background-repeat:no-repeat;    text-align:center;}body { padding:50px;}

<div class="box">TEXT HERE</div>

Padding on a:before pseudo element

use the css calc
as : width: calc(100% - 2em);

here is the fiddle : https://jsfiddle.net/hellooutlook/krgLeq6h/1/

Before / After selectors excluding padding

Although this question could definetely be better (see the comment BSMP left), I gave a shot at answering.

http://jsfiddle.net/tw32r0L6/

What I did was remove a bunch of extra stuff, and simplify a little. You should really be using the CSS border property, because it is the built in way of doing something like this. Using pseudo-elements isn't required for this basic of a task.

So after removing the CSS you had for pseudo elements, you can see that I added this:

.friend:not(:first-of-type){
    border-top: 2px #000 solid;
}

.friend:hover + .friend, .friend:hover{
    border-top-color: transparent;
}

The first part selects the .friend divs, that are not the first one, as you can see by :not(:first-of-type). You can read more about CSS pseudo-classes here. You can see that the only style I added was a top border.

Then the second selector hides the top border from all .friend divs that are hovered, and the first .friend div following one that was hovered. This is done using the + selector which selects the next sibling of an element.

The last thing I did was remove some stuff you had in the other .friend:hover part, because that wasn't needed after these fixes.

What's the purpose of these CSS rules?

This snippet has a few purposes, mostly just overriding/resetting some default styling. The * selector applies these values to every element on the page, and the ::before/::after make sure it also applies to any pseudo-elements.

Specifically...

1. It removes all padding and margin from elements that have them applied by default. For example, <ul> elements:

<ul><li>I have a margin</li></ul>

Pseudo-elements and padding

You can fix that by doing this.

Add position:relative; to the <a>:

#navBar a {
    text-decoration: none;
    display: inline-block;
    position:relative;
}

Then, change your :before and :after to position:absolute; and change their position from top and bottom:

.navGroup1 a.nav::before {
    content: "";
    display: block;
    position: absolute;
    top: 10px;
    left: 0;
    width:100%;
    height: 3px;
    background-color: red;
}

.navGroup1 a.nav::after {
    content: "";
    display: block;
    position: absolute;
    bottom:10px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: red;
}

Updated Codepen

::after margin and padding

As the ::after pseudo element is inside the li the padding will be applied after it and not either side of it. Try adding the padding to .leftNav li::after instead of the li.

.leftNav li {  list-style: none;  font-size: 1em;  display: inline;}.leftNav li::after {  content: " | ";  padding: 1em;}.leftNav li:last-child::after {  content: "";  padding: 0;}

<ul class="leftNav">  <li>menu item 1</li>  <li>menu item 2</li>  <li>menu item 3</li></ul>

---

Related Topics