Menu Close

Adding CSS border to :after element

0
(0)

You will need a new element to simulate the “border” of the pointer since the pointer is already using borders to create the triangle effect.

You can simply use the “:” before pseudo-class to create a red pointer that will be placed under the white pointer.

HTML

<div class="bubble">
  <span>Border After</span>
</div> 

CSS

<style>
    .bubble {
  margin-top: 14.85px;  /* Get pseudo-element visibile triangle height: (c^2 = a^2 + b^2) / 2 */
  /* (c^2 = <pseudo-element width>^2 + <pseudo-element height>^2) / 2 */
  text-align:center;
  padding:20px;
  background-color: white; /* Change container background */
  border: 1px solid blue; /* Change container border */
  position: relative;
  box-sizing: border-box;
  border-radius: 4px;
}
.bubble::before {
  content: '';
  width: 20px;
  height: 20px;
  background-color: inherit; /* Inherit container background */
  border-left: inherit; /* Inherit container border-left */
  border-top: inherit; /* Inherit container border-top */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc((-20px / 2) - 1px)) rotateZ(45deg); /* calc((-<pseudo-element width> / 2) - <border-width>)) */
  box-sizing: inherit;
}
.bubble > * {
  position: relative; /* Position direct children on top of pseudo-element */
}
</style> 

Output

Border After

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Share

Posted in CSS, HTML

Leave a Reply

Your email address will not be published. Required fields are marked *

You can also read...