LiveEn LiveEn - 20 days ago 5
CSS Question

Adding css border to :after element

I have bubble-like pop-up which displays on hover. I need to add a border around the bubble, but the problem is that I'm unable to add a border to the pointer of the bubble.

The arrow is made by the

.bubble:after


You can view the fiddle here http://jsfiddle.net/livewirerules/c2Lh6zv6/1/

Below is the css

.bubble {
display: none;
z-index: 10;
position: absolute;
border:solid 1px red;
text-align:center;
top: 40px;
left: -20px;
width: 75px;
height: 80px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -15px;
top: -15px;
left: 50%;
}


Any help will be appreciated

Answer

Try adding a :before element that creates the same arrow as your :after but make it a little bit larger, and red. make sure the :before is behind your :after and it should give the same affect as having a border on your :after arrow.

.bubble:before
{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 0 17px 16px;
  border-color: red transparent;
  display: block;
  width: 0;
  z-index: 1;
  margin-left: -17px;
  top: -16px;
  left: 50%;
}

edit: linked to correct jsfiddle

revised fiddle

Comments