Menu Close

Adding CSS border to :after element

Codeamend

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
Posted in CSS, HTML

You can also read...

Leave a Reply

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