Adding css border to :after element

Question

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 1

body {
  margin: 0;
}
.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 */
  width: 80px;
  height: 80px;
  background-color: white; /* Change container background */
  border: 1px solid red; /* 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 */
}

<div class="bubble">
  <span>Test Test Test Test</span>
</div>

Answer 2

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 16px 16px;
  border-color: red transparent;
  display: block;
  width: 0;
  z-index: 1;
  margin-left: -16px;
  top: -16px;
  left: 50%;
}

edit: linked to correct jsfiddle

revised fiddle

Answer 3

You could do this and stop worrying about all this "add a border to the pseudo-element", when your whole pseudo-element is actually a border.

body {
  margin: 0;
}
.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 */
  width: 80px;
  height: 80px;
  background-color: white; /* Change container background */
  border: 1px solid red; /* 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 */
}

<div class="bubble">
  <span>Test Test Test Test</span>
</div>

If the border-width is consistant between your elements, you just need to change these lines of code:

background-color: <background-color>; /* Change container background */
border: 1px solid <border-color>; /* Change container border */

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.bubble {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  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 */
  width: 80px;
  height: 80px;
  background-color: chartreuse; /* Change container background */
  border: 1px solid dodgerblue; /* 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 */
}

.bubble:nth-of-type(2) {
  background-color: gold;
  border: 1px solid purple
}

.bubble:nth-of-type(3) {
  background-color: dodgerblue;
  border: 1px solid cyan
}

.bubble:nth-of-type(4) {
  background-color: tomato;
  border: 1px solid firebrick;
}

<div class="bubble">
  <span>Test Test Test Test</span>
</div>

<div class="bubble">
  <span>Test Test Test Test</span>
</div>

<div class="bubble">
  <span>Test Test Test Test</span>
</div>

<div class="bubble">
  <span>Test Test Test Test</span>
</div>

---

Applied to your specific demo:

/* Styles specific to this particular page */

#container2 {
  background: #eeeef4 none repeat scroll 0 0;
  border-radius: 5px;
  margin: 20px auto;
  padding: 20px;
  width: 250px;
}

.scroll-pane {
  width: 50%;
  height: 200px;
  overflow: auto;
}

.horizontal-only {
  height: auto;
  max-height: 200px;
}

.image {
  position: relative;
}

.image:hover .bubble {
  display: block;
}

.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::before {
  content: '';
  width: 15px;
  height: 15px;
  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((-15px / 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 */
}

td {
  width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<link href="http://jscrollpane.kelvinluck.com/style/demo.css" rel="stylesheet"/>
<link href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css" rel="stylesheet"/>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<div id="container">
  <div class="scroll-pane horizontal-only">
    <table id="bu">
      <tr>
        <td>Data</td>
        <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
          <div class="bubble">
            <a>Test</a>
            <br>
            <a>test</a>
          </div>

        </td>
      </tr>

      <tr>
        <td>Data</td>
        <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
          <div class="bubble">
            <a>Test</a>
            <br>
            <a>test</a>
          </div>

        </td>
      </tr>

      <tr>
        <td>Data Input</td>
        <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
          <div class="bubble">
            <a>Test</a>
            <br>
            <a>test</a>
          </div>

        </td>
      </tr>

      <tr>
        <td>Data Test</td>
        <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
          <div class="bubble">
            <a>Test</a>
            <br>
            <a>test</a>
          </div>

        </td>
      </tr>
    </table>
  </div>

</div>

jsFiddle

Answer 4

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 simple use the :before pseudo class to create a red pointer that will be placed under the white pointer.

/* Styles specific to this particular page */
#container2 {
    background: #eeeef4 none repeat scroll 0 0;
    border-radius: 5px;
    margin: 20px auto;
    padding: 20px;
    width: 250px;
}
.scroll-pane
{
	width: 50%;
	height: 200px;
	overflow: auto;
}
.horizontal-only
{
	height: auto;
	max-height: 200px;
}

.image {
  position: relative;
}
.image:hover .bubble {
  display: block;
}
.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:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FF0000 transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -15px;
top: -16px;
left: 50%;
}

.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%;
}

td {
    width: 150px;
}

<div id="container">
<div class="scroll-pane horizontal-only">
				
        <table id="bu">
<tr>
  <td>Data</td>
  <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>

<tr>
  <td>Data</td>
  <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>

<tr>
  <td>Data Input</td>
  <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>

<tr>
  <td>Data Test</td>
  <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>
</table>
			</div>
      
      </div>

Check the example in the update fiddle.