Displaying a <div> element within a :before pseudoelement

Implementing the use of :before to insert an icon font into a div for a CSS3 hover state. I am looking to incorporate a div within the <a> tag in order for both elements to function as links:

<a href="#set-4" class="column product hi-icon product-icon"><div>Product</div></a>

CSS:

.product-icon:before {
    content: "\e601";
    margin-top: "-4px";
}

However, I am struggling to find a way to display the title div.

I have created a CodePen demo to showcase the issue. Can anyone offer guidance on how to solve this problem? Much appreciated!

htmlcss

Answer №1

The <div> element is currently receiving a font-size value of 0 from the .hi-icon class. By removing this, the content will be displayed below the circle.

Answer №2

One important point to remember is that you cannot inject html using the :before and :after pseudo-classes.

Additionally, both :before and :after will place their contents on the outside of the targeted element, rather than inside it. So, even if you attempt to use :before/:after for inserting html, you'll end up with 

<div><a ...>Product</a></div>
, not 
<a ...><div>Product</div></a>
.

If you do find yourself needing to automatically wrap the contents of an a tag with a div, you can achieve this easily with jQuery:

$('.product-icon').each(function() {
    $(this).html('<div>' + $(this).html() + '</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

Incorporating text sections into a div container and adjusting the width

Currently facing an issue with the canvas element on my project. <div id="app-container"> <div id="canvas-container"> <div id="canvas"></div> </div> </div> In the CSS stylesheet, the following styles ar ...

javascriptjquerycss

Using Jquery to toggle a class on click, and dynamically change based on the screen size

I am trying to figure out how to toggle a CSS class on an element by clicking on a div using jQuery. I know how to do it, but I also want the toggle to only happen when the screen size is less than 800px. I'm not very familiar with JavaScript, so I co ...

jquerycssscreen

What steps can I take to get rid of the 'Optimize CSS Delivery' notification on my website?

Utilizing Google's PageSpeed Insights to analyze my website's speed, I have identified an issue: Your page currently has 11 blocking CSS resources, resulting in slower rendering time. About 5% of the content above-the-fold could be displayed with ...

css

Incorporate text onto an image using Semantic UI

Currently, I am utilizing Semantic UI to display images. While it is functioning well for me in terms of adding text near the image, I desire to have the text positioned on top of the image. Ideally, I would like it to be located on the lower half of the i ...

javascripthtmlcssreactjssemantic-ui

Surround the image with a margin by wrapping text around it

Is it possible to display text in a div with a border and margin around an image using float: right? I have managed to get the text to wrap correctly around the image, but the border is positioned behind the image. UPDATE Here is a snapshot of how I wa ...

css

Delete the designated column from the table

I am having difficulty with hiding and showing table columns using checkboxes. I need to eliminate the Mars column (in bold) along with its corresponding data (also in bold). Once the Mars column is removed, I want the Venus column and its data values to ...

javascriptcss

Combining TypeScript into HTML resulted in an error: Uncaught ReferenceError clickbutton is not defined

Attempting to create a basic CRUD frontend without the use of any frameworks. I am encountering an issue when trying to include a TypeScript file (index.ts) in my index.html, as the functions called within it are showing as undefined. I understand that bro ...

htmltypescriptfrontend

How can I arrange images vertically instead of placing them side by side?

I need help figuring out how to display multiple images in a vertical format instead of horizontally in the code below. The images are wide and take up too much space if shown side by side. My coding skills are basic, so specific guidance on where to mak ...

phphtmlcss

Woocommerce - [product_categories] shortcode - Can I exclude specific categories from being displayed in the list?

Is there a way to hide specific categories (only two in this case) that are displayed using the [product_categories] shortcode? I have attempted to place these categories at the bottom of the list and used CSS to target them: .home .woocommerce ul.product ...

csswordpresswoocommercecategories

What is the process for incorporating a personalized SVG file into the material-ui Icon Component?

For my project, I have a requirement to use custom svg files. To achieve this, I am utilizing <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0865697c6d7a616964257d61483b2631263b">[email protected]</a>. I reviewed ...

cssreactjssvgiconsmaterial-ui

Populating table with information stored locally

Hello there, I am currently working on a journal project where I am facing an issue with the getItem function of localStorage. Whenever I add entries to the table and refresh the page, all the entries disappear except for one row with default input values ...

javascripthtmllocal-storage

Encountering a 404 Not Found issue while trying to add scripts with Node.js

I am currently working with a node server and an HTML file, where the default route is being directed. server.js /** * Created by Creative Coder on 10/26/2015. */ var express = require('express'); var mysql = require('mysql'); var a ...

htmlangularjsnode.jsexpress

problem with saving session data

I am attempting to access data from another page using session storage. On my initial page, named home.html function go_to_faq(qnum){ window.open('FAQ.html', '_blank'); sessionStorage.setItem('key2', qnum); } <a s ...

javascripthtmlcsssession-storage

Changing the background color with a switch function in ReactJS

After clicking a link, a view is rendered based on the "id" from a JSON. To enhance the user experience, I want to add a background color when a particular view renders and also toggle the style. This code snippet illustrates how the crawl is displaye ...

javascriptcssreactjs

Guide to switching between 3 classes with mouseover using JavaScript

Currently, I am dealing with an unordered list that contains 4 items. The goal is to have the list grow to 100% of its width when hovered over, while all 'noun hovered li' items should shrink to a width of 0%. Once the cursor leaves, everything s ...

javascripthtmlcss

Undo a CSS transition when clicked

There is a div named learn-more which expands to fill the whole page when a CSS class is added like this: .learn-more{ padding:10px; font-size: 20px; text-align: center; margin-top:20px; font-family: klight; -webkit-transition:2s; ...

javascriptjqueryhtmlcss

Instructions on dynamically positioning a collection of div elements at the center of a webpage container

I am looking to create a set of divs that are centered on the page and adjust in size according to the length of the username. .Container1 { display: table; width: 100%; padding:0; margin:0; -webkit-box-sizing: border-box; -moz-box-sizing: bor ...

javascripthtmlasp.netcss

Iframe Interactivity

My goal is to create an interactive iframe that will match the current parent URL (). For example, if I have an iframe pointing to http://www.google.com and click a link within the iframe, it should update the parent URL to , and then load the clicked con ...

javascriptjqueryhtmliframe

What is the best location to integrate jQuery UI Bootstrap in a Rails project

In order to use Bootstrap and jQuery UI together in my application, I decided to integrate jQuery UI Bootstrap. Unfortunately, many of the gems that handle asset pipeline integration seem outdated, so I opted to manually download the CSS files and insert t ...

jquerycssruby-on-railstwitter-bootstrapjquery-ui

Numerous elements positioned absolutely are overlapping

I am working on a website with a unique slide layout design. I am currently focusing on two specific slides: https://i.stack.imgur.com/xngF4.png and https://i.stack.imgur.com/W19tJ.png My goal is to include a button on each individual slide, similar to th ...

htmlcsscss-position