Creating an arrow icon alongside a pseudo:hover::before element

This is my custom code snippet:

.privacycheck1 {
  position: relative;
  top: 265px;
  background-color: #CF0000;
  width: 24px;
  height: 24px;
  left: 843px;
  border-radius: 50px;
  border: 5px #E60000;
}
.privacycheck1::before {
  position: relative;
  display: block;
  height: 20px;
  width: 200px;
  left: 30px;
}
.privacycheck1:hover::before {
  content: 'This information is private';
  width: 125px;
  height: 35px;
  background-color: #CF0000;
  left: 40px;
  top: -10px;
  font-family: arial;
  font-size: 15px;
  font-weight: 100px;
  color: white;
  padding: 10px;
}
<div class="privacycheck1"></div>

I'd like to implement a feature where hovering over the privacycheck1 element shows an arrow connecting to the box and pointing at the circle within privacycheck1. Is there a way to nest a class within another class in CSS?

htmlcsscss-shapes

Answer №1

To achieve this effect, you can utilize an additional span element.

Start by creating the tail of the arrow using the span, and then use the border-hack technique on the after pseudo-element to create the arrow head. For a variety of arrow designs, you can explore a collection here

.privacycheck1 {
  position: relative;
  top: 30px;
  background-color: #CF0000;
  width: 24px;
  height: 24px;
  left: 30px;
  border-radius: 50px;
  border: 5px #E60000;
}
.privacycheck1::before {
  position: relative;
  display: block;
  height: 20px;
  width: 200px;
  left: 30px;
}
.privacycheck1:hover::before {
  content: 'This information is private';
  width: 125px;
  height: 30px;
  background-color: #CF0000;
  left: 40px;
  top: -10px;
  font-family: arial;
  font-size: 15px;
  font-weight: 100px;
  color: white;
  padding: 10px;
}
.arrow {
  position: absolute;
  width: 15px;
  height: 5px;
  background: green;
  left: 20px;
  top: 8px;
  display:none;
}
.arrow:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid green;
  left:15px;
  top:-2px;
  display:none;
  }
.privacycheck1:hover span,.privacycheck1:hover span:after{
  display:block;
  }
<div class="privacycheck1"><span class="arrow"></span>
</div>

Answer №2

A separate span is not necessary. Simply use an :after in the same way you used a :before.

.privacycheck1:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 100%;
  width: 0;
  height: 0;
  margin-top: -15px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #CF0000;
 }

By using top: 50% and setting margin-top to negative half of the arrow height, you can ensure perfect vertical alignment. Since the arrow height in this case is 30px, the margin-top is set to -15px.

There is a mistake in your hover:before. 'font-weight: 100px;' is not a valid property. You can use 'bold', '700', or another appropriate value.

For better alignment, consider adding the following to your hover:before

left: calc(100% + 15px);

This adjustment ensures the correct spacing between the 'dot' and the text box. The box will align from the left edge of the parent element (with position: relative) plus 15px (the arrow width).

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

Text using Bootstrap positioned to the right of the breadcrumb navigation bar

Currently, I am using the default theme with Bootstrap 3. I have implemented breadcrumbs as shown below: <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> < ...

csstwitter-bootstrap-3

Expanding Images with JQuery Accordion

I'm facing a problem where I need to include accordions on my website with images, but whenever the accordion is opened, the image ends up stretched. Is there a solution to prevent this from happening? Below is the code snippet I am using: [Fiddle] ...

jqueryhtmlcssaccordion

Fixing a CSS animation glitch when using JavaScript

I'm facing an unusual issue with my CSS/HTML Check out my code below: a:hover { color: deeppink; transition: all 0.2s ease-out } .logo { height: 300px; margin-top: -100px; transition: all 0.2s ease-in; transform: scale(1) } .logo:hover { transit ...

javascripthtmlcss

What is the correct way to include viewport width in pixels using CSS?

My div is set to a width of 50vw with padding of 25px on all sides. I am looking to add a fixed element to the right of it by increasing its width by 50vw and adding 25px. Can this be achieved using only CSS, or should I consider using Less? If so, how c ...

htmlcss

Include an additional Div tag in the existing row

I've been attempting to include an additional div, but it consistently appears as the second row.. I want all of them to be on the same row and aligned with each other. Here is the HTML code: <div class="content-grids"> <div clas ...

htmlcsswidthdivision

Feeling lost when it comes to forms and hitting that submit button?

Below is a sample form structure: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.abcdefg.com/my.cgi" method="POST"> <div align="center"> <br><br; <br& ...

javascripthtmlcss

What is the best location to insert the code for toggling the text on a button?

I'm looking to update the button text upon clicking. When the button is clicked, the icon changes accordingly. I want the text to change from "Add to list" to "Added to list". I attempted to implement this functionality with some code, but I'm un ...

javascripthtmlbuttontoggle

stream a song with a font awesome symbol

Can an audio track be played using a font awesome icon, such as displaying the song name (mp3) with a play icon right next to it? When users click on the play icon, can the track start playing and be paused or stopped at will? The list will consist of app ...

javascripthtmlfont-awesomemp3

Learn how to use AJAX to automatically retrieve the contents of a file

I'm currently exploring AJAX to retrieve the contents of a file upon clicking a button, as I am fairly new to AJAX. Below is the HTML code snippet: <!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { ...

pythonhtmlajaxfile

The Beginner's Guide to Mastering Ajax and Grails

As a newcomer to Grails and AJAX, I find myself struggling to understand the concept of AJAX with limited resources online. My current understanding is that in Grails, if I want to trigger a method in one of my controllers when a specific part of my HTML ...

htmlcssajaxgrailsweb-applications

Display only the highest image in the picture carousel using Jquery

My goal is to create a simple image slider using HTML, CSS, and Jquery. However, when I try to move it left by 750px, only the topmost image moves and the rest of the images are not displayed. It seems like all the images are moving at once instead of jus ...

jqueryhtmlcss

How can I ensure that the height of my Flexbox always stretches vertically to 100% and fills the available space?

https://i.sstatic.net/j3VOr.png https://codepen.io/leon-yum/pen/GxWqMe?editors=1100 Attempting to replicate an issue encountered in one of our applications. The Sidebar within our app never expands 100% to accommodate the content. The <div class="cont ...

htmlcssflexbox

Triggering scroll snapping in CSS based on a different user action than just scrolling

Take a look at this example: https://codesandbox.io/s/spring-wood-0bikbb?file=/src/styles.css Try this to recreate the issue: Click on the input at the top Scroll to the bottom, then click on an empty area Observe how the screen jumps back up to the top ...

css

Exploring td data inside tr element using LXML

Is there a better way to parse individual statistics from the Yahoo Finance tables for formatting purposes? The current method involves repeating code to retrieve stats within each row of the table, as shown in the example below. It seems inefficient - a ...

pythonhtmlpython-3.xlxml

The img:first-of-type selector targets specifically the first image within a group

When a user visits my website using a touch device or without Javascript support, I want the first of two images to display. To achieve this, I am targeting them using Modernizr. The menu button at the top of the page: <img src="menubutton.png" alt="M ...

htmlcssmodernizr

Struggling with aligning and floating links to the right while crafting a custom navigation bar

I'm in the process of crafting a custom navigation bar for my website, with the intention of having my name prominently displayed on the far left while the links float to the far right. I've utilized CSS to style everything within the nav section ...

htmlcss

Tips for designing a pre-selection process

I've been considering the idea of implementing a temporary screen that allows users to choose between different options before proceeding to a specific page. For instance, on the contact page, users would be prompted with a question like "Are you loo ...

javascripthtmlcss

Ways to take an item out of your shopping cart

Do you have any ideas on how to handle cart redirection in JavaScript? My specific request involves a cart with a function that removes products. What approach should I take to redirect to the main page if the cart becomes empty? Here is the delete produc ...

javascripthtmljsonshopping-cart

Unresponsive Radio Buttons in HTML

Have you ever encountered the issue where you can't seem to select radio buttons despite them having a confirmed name attribute? Here is an example of the HTML code: <div id="surveys-list" class="inline col-xs-12"><div> <div class="i ...

javascriptjqueryhtmlcssradio-button

A div element springs forth into a new window and seamlessly transitions back to its original position with fresh content

Most of us are familiar with Gmail chat, where you can pop out the chat window into a new window with its content, and then pop it back in to its original position. However, I encountered an issue while working on replicating this functionality. While I w ...

javascriptjqueryhtmliframe