CODEWITHSUNDEEP
htmlcss
user4207046
user4207046

Reputation:

Css after pusedo display before the div

Im trying to do simple arrow with css and when im using after, the element is display before the div. why this is happening?

div {
  width: 400px;
  height: 40px;
  background: #000;
  margin-top: 3em;
}
div:after {
  content: '';
  display:inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 40px;
  border-color: transparent transparent transparent #7B98B5;
}

    <div></div>

http://plnkr.co/edit/SkUY5ygufCdXXpRdSQl5?p=preview

Upvotes: 0

Views: 125

Answers (4)

LcSalazar
LcSalazar

Reputation: 16821

A pseudo element becomes a child of the applied element. So, making it :after, won't put it after the element itself, but after the element's content... which it is in fact doing.

Since you have no content, it appears to be at the left of the div, but it is not...

div {
  width: 400px;
  height: 40px;
  background: #000;
  margin-top: 3em;
  color:white;
}
div:after {
  content: '';
  display:inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 40px;
  border-color: transparent transparent transparent #7B98B5;
}
<div>my div content</div>

Upvotes: 0

user2019037
user2019037

Reputation: 762

You can use float: right to pseudo-element :after:

div {
  width: 400px;
  height: 40px;
  background: #000;
  margin-top: 3em;
}
div:after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 40px;
  border-color: transparent transparent transparent #7B98B5;
  float: right;
}
<div></div>

Upvotes: 0

Phil Tune
Phil Tune

Reputation: 3305

I would make sure to include:

div {
    ...
    position: relative;
}
div:after {
    ....
    position: absolute;
    left: 100%;
}

Updated your Plunker (never heard of that site before): http://plnkr.co/edit/7oXVgqEBLBuoYLDsRlEM?p=preview

Upvotes: 2

Nick
Nick

Reputation: 291

You still need to position the element properly. I would do something like this:

div {
  width: 400px;
  height: 40px;
  background: #000;
  margin-top: 3em;
  position: relative; /* Added */
}
div:after {
  content: '';
  position: absolute; /* Added */
  right: -40px; /* Added */
  top: 0; /* Added */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 40px;
  border-color: transparent transparent transparent #7B98B5;
}

Upvotes: 0

Related Questions