How to give a stylish touch to your :after element with a css

I have a unique bubble design that pops up when hovering. I'm trying to add a border around the bubble, but I'm facing difficulty adding a border to the pointer of the bubble.

The arrow is created using the .bubble:after selector.

You can check out the code on this fiddle: http://jsfiddle.net/example-link

Here is the CSS code:

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

Your assistance with this issue would be greatly appreciated.

htmlcsscss-position

Answer №1

For a creative twist, consider incorporating a :before element that mimics your :after arrow but with a larger size and in a vibrant red color. Position the :before element behind the :after element to achieve an effect similar to 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%;
}

Update: Link to the correct jsfiddle

revised fiddle

Answer №2

To achieve the desired effect of a triangular pointer, you will need to introduce a new element specifically for outlining the pointer, as the existing borders are already being used for the triangle effect.

You can easily create a red pointer using the :before pseudo-class, which will be positioned beneath the white pointer.

/* Custom styles for this 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>

For a demonstration, view the example in the updated fiddle.

Answer №3

Instead of adding a border to the pseudo-element, consider treating the whole pseudo-element as your border.

body {
  margin: 0;
}
.bubble {
  margin-top: 14.85px; 
  width: 80px;
  height: 80px;
  background-color: white;
  border: 1px solid red; 
  position: relative;
  box-sizing: border-box;
  border-radius: 4px;
}
.bubble::before {
  content: '';
  width: 20px;
  height: 20px;
  background-color: inherit;
  border-left: inherit; 
  border-top: inherit; 
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc((-20px / 2) - 1px)) rotateZ(45deg); 
  box-sizing: inherit;
}
.bubble > * {
  position: relative; 
}
<div class="bubble">
  <span>Test Test Test Test</span>
</div>

If your elements have consistent border-width, simply modify 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; 
  width: 80px;
  height: 80px;
  background-color: chartreuse; 
  border: 1px solid dodgerblue; 
  position: relative;
  box-sizing: border-box;
  border-radius: 4px;
}
.bubble::before {
  content: '';
  width: 20px;
  height: 20px;
  background-color: inherit; 
  border-left: inherit; 
  border-top: inherit; 
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc((-20px / 2) - 1px)) rotateZ(45deg);
  box-sizing: inherit;
}
.bubble > * {
  position: relative; 
}

.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>

Adapted for your specific demo:

#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; 
  border-left: inherit; 
  border-top: inherit; 
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc((-15px / 2) - 1px)) rotateZ(45deg);
  box-sizing: inherit;
}
.bubble > * {
  position: relative; 
}

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>

View Demo on jsFiddle

Answer №4

body {
  margin: 0;
}
.bubble {
  margin-top: 14.85px;  
  width: 80px;
  height: 80px;
  background-color: white; 
  border: 1px solid red; 
  position: relative;
  box-sizing: border-box;
  border-radius: 4px;
}
.bubble::before {
  content: '';
  width: 20px;
  height: 20px;
  background-color: inherit; 
  border-left: inherit; 
  border-top: inherit; 
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc((-20px / 2) - 1px)) rotateZ(45deg); 
  box-sizing: inherit;
}
.bubble > * {
  position: relative; 
}
<div class="bubble">
  <span>Test Test Test Test</span>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it illegal to escape quotes when using an image source attribute and onerror event in HTML: `<img src="x" onerror="alert("hello")" />`?

Experimenting with escape characters has been a fascinating experience for me. <img src="x" onerror=alert('hello'); /> <img src="x" onerror="alert(\"hello\")" /> The second code snippet triggers an illegal character error ...

javascripthtml

Generate a custom website using React to display multiple copies of a single item dynamically

As a newcomer to React and web development, I've been pondering the possibility of creating dynamic webpages. Let's say I have a .json file containing information about various soccer leagues, structured like this: "api": { "results": 1376, ...

javascripthtmlreactjsurldynamic

Whenever I press a button, my desire is for each picture to seamlessly reposition itself in the exact same spot on the screen

Having some issues with my code. When I click a button, the plan is for the pictures to change one by one to simulate a traffic light sequence. However, when I run the code, all the pictures appear at once without any effect from the button. Any help in ac ...

javascripthtmlcss

Showing fetched data from Firebase in an Ionic 3 HTML file

Looking for assistance on how to display data retrieved from my firebase database in my HTML file. I need help with organizing the data, starting with displaying customer user's data. Eventually, I want to make it clickable and put the user's dat ...

htmlangularfirebaseionic-frameworkfirebase-realtime-database

Ajax handling all tasks except for adding HTML elements

Having an issue with my basic "Load More on Scroll" AJAX function. The console is showing that the HTML is being sent back from the request, but for some reason, nothing is being rendered on the page. I must be missing something really simple here. $(wi ...

javascripthtmlajax

how to dynamically update a button's text using Vue.js

I have a challenge where I need to dynamically change the text of a button based on whether a value is true or false. Below is the code snippet that I have been working on: <button class="btn btn-primary table-button" type="button&quo ...

javascripthtmlvue.jsbuttonwatch

Tips for switching out images depending on the time of day

Currently, I have a script that dynamically changes the background color of my webpage based on the time of day. However, I am facing issues trying to implement a similar functionality for replacing an image source. The current code is also time zone-based ...

javascriptjqueryhtmlcss

Add a fresh text field with the click of a button and delete it with another button in Laravel 4

My form includes two fields: phone and email, as shown in the image below. By clicking on the plus button, I would like to add an additional text field to the form below the button. Similarly, by clicking on the minus button, I want to remove the text fie ...

javascriptphpjqueryhtmllaravel-4

Mapping corners with Google Maps

The mask assigned to webkit-mask-image will remain stationary even when scrolling the page. View jsFiddle Sample body{ height:1500px; } #wrapper { margin-top:250px; width: 300px; height: 300px; border-radius: 100px; overflow: hi ...

cssgoogle-maps-api-3

Steps for inserting an image:

Looking for help adding a static header image to a simple HTML page that contains two div tags: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd"> <html> <head> ...

jqueryhtml

Utilize the div element to segment a webpage into four different sections

Within a div tag, I have used 4 other div tags to create equal areas. Is there an alternative method to achieve this division or improve it? <div style="width: 689px; margin-left: 215px; margin-top: 0px; float: none; height: 502px;"> ...

htmlcss

Creating a Seamless Bond Between JavaScript and HTML

I've been struggling to find a helpful and straightforward solution to a simple problem. On my web page, I have five image placeholders that should be filled with one of nine random pictures. To achieve this, I wrote a JavaScript code that generates r ...

javascripthtml

How to set element height based on screen height rather than browser height

How can I set the height of a div container to be 60% of the screen height, but ensure it maintains that height even when the browser window is resized? Setting the height as 60% in CSS works initially, but the div shrinks proportionately when the window s ...

csspositionheight

It is not possible to simultaneously utilize the properties `display: inline-block` and `width: 100%`

As someone with limited CSS knowledge, I have encountered a challenge. My goal is to ensure that my website's body has a width of 100%, while also preventing the content from wrapping when the browser window is resized. To achieve this, I attempted a ...

htmlcssstyleswidthinline

Address the underlying issues with the background

I am working on an app and I want to include a fixed background image. I am using HTML5, CSS3, and JavaScript for this project. I have applied the CSS code to set the background image as fixed: body{ background:#1F1F1F url(../assets/bg.png) fixed;} Ev ...

htmlcss

Adjust the position of the icon in the Mui DatePicker widget

How can I customize the mui DatePicker? I successfully changed the icon, but now I need to adjust its position as well. Instead of being at the end of the text, I want the icon to be at the beginning. Here is my code: <ThemeProvider theme={calendarThem ...

htmlcssreactjsmaterial-uiicons

Barba.js Revolutionizes Page Reloading for Initial Links

On my Wordpress site, I am using Barba js v.2 for page transitions. However, I have encountered an issue where I need to click on a link twice in order to successfully change the page and make the transition work. Interestingly, the first time I click on t ...

javascriptphphtmlwordpressbarbajs

Inserting HTML content into a DIV with the help of jQuery

Looking for a solution with my index.html file. I want to load other HTML files into a DIV by clicking on buttons. Here's an example of what I'm trying to achieve: I've searched through various examples online, but none seem to work for ...

javascriptjqueryhtml

I'm feeling pretty lost when it comes to understanding how line-height and margins work together

When creating a webpage layout, my goal is to maintain balance by ensuring there is an equal amount of spacing between sections and elements. However, when dealing with varying font sizes and line heights, achieving this can be challenging. To provide fur ...

htmlcss

The CSS outline properties vary between input elements and input elements in focus

I'm encountering an issue with a box and its associated CSS outline style. When the box is focused, it should display a blue outline (which is working fine). However, upon form validation, if there is an error, the .error class is added which should c ...

csshtml