Conceal information from view without hiding pseudo content visually

Here's a method I'm using to incorporate icons through the use of :before or :after pseudo content:

<span class="icon icon__example is-content-visually-hidden">assistive text</span>

Is there a way to hide the assistive text visually without affecting the visibility of the .icon pseudo content? The goal is for neither the assistive text nor the space it occupies to be visible, allowing these icons to be used inline. Once .is-content-visually-hidden is turned off, the text should become visible again. I've experimented with techniques like text-indent: -9999px without success.

Check out this codepen for a demonstration of the issue.

css

Answer №1

To create the illusion of hidden text, one simple method is to apply a font-size of 0 to the inner text and then reset the font for a pseudo-element to its normal size in order to display it:

.hidden-text {
  font-size: 0;
}

.show-icon::before {
  content: "*";
  font-size: 24px;
}

Check out the demonstration here: Demo Link

Alternatively, a more versatile approach involves wrapping the text within an additional span element:

<div class="icon show-icon hidden-text">
  <span>text</span>
</div>

This way, only the span element needs to be hidden.

Answer №2

Instead of directly hiding the inner text, consider wrapping it in a span element for better control. If that isn't possible, you can try setting the 

font-size: 0

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

having difficulty with an intricate flexbox grid within another flexbox

I attempted to create a grid-like pattern using a negative margin based grid system (Susy) but was unsuccessful. Next, I tried employing flexbox for the task. However, I'm unsure if it's achievable. My initial idea was to have 2 columns (side A ...

htmlcssflexboxsusy-sass

Focusing solely on a particular category in EJS

I am struggling with this code snippet. HTML: <header<% if ( current.source === 'features' || current.path[0] === 'index' || current.source !== 'customers' ) { %> class="header-white"<% } %>> <div cl ...

javascriptcssejsharp

The text should be wrapped to overlap with an image positioned above it

Currently, I am in the process of enhancing a webpage that contains a significant amount of old legacy code. One issue I have encountered pertains to text wrapping within a fixed-height and width container, as illustrated in the image below: https://i.sst ...

htmlcss

Listening for position changes using jQuery events

It is essential to be able to track the relative position of elements, especially when dealing with dynamic layout issues. Unfortunately, there are no built-in options in CSS to listen for changes in position() or offset() attributes. Reason: Changes in a ...

jquerycssposition

Ways to find the image source using JavaScript/Jquery upon page loading?

I've scoured countless forums, yet a viable solution still eludes me. My objective is simple - upon page load, I want to gather all elements with the ".home" class and store them in an array called arr. Subsequently, the script should iterate through ...

javascriptjqueryhtmlcss

clicking on internal links in the bootstrap side menu causes it to jump

Im trying to add a side menu to a help page. The menu and internal links are functioning properly, but when clicked, the side menu partially goes behind the navbar. As a beginner, I'm not sure how to resolve this issue. Can someone offer some guidan ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can I add 0-5 images to a column without causing any distortion in the row?

I'm having trouble adding a series of images to rows in my Bootstrap 4 project. The source assets are large by default and I'm struggling with scaling them properly without affecting other columns. Here's a visual representation of what I cu ...

cssruby-on-railstwitter-bootstraperbtwitter-bootstrap-4

Are there any better methods for creating div backgrounds and borders using CSS?

Within my application, there exists a multitude of div elements that share identical backgrounds and borders but vary in size. Having to utilize the same background image for each individual div proves to be highly inefficient, particularly in terms of ba ...

htmlcss

Two nested divs positioned below text within a parent div

I am styling a content div with text and two child divs positioned next to each other within the content div. My goal is to have the child divs display below the text, rather than beside it. body { text-align: center; } #first, #second { border: so ...

htmlcss

Animation is not applied to Bootstrap Collapse on a row within a table

My Bootstrap 4 table has an issue - when I apply the "collapse" class to a table row, it behaves differently compared to applying it to a div element. Clicking "animate div" smoothly animates the target div, but clicking "animate tr" does not animate the ...

javascriptcsstwitter-bootstrapbootstrap-4

How can I fix the issue where Sx is not converting the styles to CSS format for the fill property exclusively?

The primary-main is supposed to change color to something like #abcdefg, but it seems to be stuck displaying primary-main as is. I am working with angular MUI + React https://i.sstatic.net/x07aI.png https://i.sstatic.net/8yuU3.png ...

cssreactjsmaterial-ui

Tips for adding and removing active class with navbar links using JavaScriptonclick

I need help with toggling the "li-active" class on my navigation bar links. Currently, when I click on a link, the "li-active" class is transferred from the previous link to the newly clicked link instead of removing it first. Can someone please assist me ...

javascripthtmlcss

The o-gradient feature is not compatible with Mac and Linux operating systems

Hello there! I am facing an issue with creating a gradient on my website without using an image. Surprisingly, the gradient appears on Windows but not on Mac or Linux operating systems. Any idea why this might be happening? You can check out the website he ...

htmlcss

How can I add text to the title of a border using Bootstrap5?

I am attempting to create a design where text appears within the border of an element. I am currently utilizing Bootstrap 5 and jQuery for this project. Despite my efforts with fieldset and legend elements, I have not been successful in achieving the desir ...

htmljquerycsstwitter-bootstrapbootstrap-5

What is the best method to ensure that an image remains at the bottom of a div even as the div's height adjusts?

In my current project, I am facing a challenge with positioning an image in the bottom-right corner of a dynamically changing div. Initially, this is easily achieved by using CSS selectors: #div1 { position: relative; } #div1 img { position: abso ...

jquerycsspositioning

Variances in the order of HTML elements within an article's layout

Check out this example of HTML and CSS <!DOCTYPE html> <html> <head> <title>Floats Example</title> <style type="text/css"> .left { float:left; width:100px; } .righ ...

htmlcss

Place the HTML images in the center of the page

I would like the two images to be centered on the page. Please refer to this visual representation for guidance: Here is the code snippet: * { box-sizing: border-box; } .column { float: left; width: 28%; height: 28%; padding: 5px; } /* Cle ...

htmlcss

Accelerate website loading

After testing the speed of my site's loading, I discovered that the reason for its slow speed is... Some proxy caching servers do not cache resources with a "?" in the URL. To address this issue, it is recommended to remove the query string and enc ...

htmlcssweb-development-server

CSS allows for the creation of fixed bars that remain at the top of the

I am looking to create a fixed bar that is off-center with a scrolling background. The code I have so far either places the bar on the surface but fixes it to the background, or it positions the bar beneath the image and fixes it to the window - neither ...

htmlcsscss-position

Explanation for aligning anchors within an HTML <div>

I'm faced with this HTML snippet: <div class="row"> <div class="col-md-10 social-icons"> <a href="https://www.youtube.com/" target="_blank"><img src="/images/youtube-i.png"></a> <a href="https://gi ...

htmlcss