What is the CSS technique for concealing the content of an ordered list item while retaining the marker?

In our order process, we utilize an ordered list to display the steps in sequence:

<ol>
  <li>Products</li>
  <li class="active">Customer</li>
  <li>Payment</li>
</ol>

On desktop view, it appears as follows:

1. Products > 2. Customer > 3. Payment

In case of limited horizontal space, we aim to simplify it to (assuming Customer is the current step):

1. > 2. Customer > 3.

Our current solution involves introducing artificial spans and hiding them on smaller screens:

<ol>
  <li><span>Products</span></li>
  <li class="active"><span>Customer</span></li>
  <li><span>Payment</span></li>
</ol>

Is there a way to hide the text content without using spans? If so, how can this be achieved?

PS: Our focus is on supporting modern browsers like Edge Chromium, Chrome, Safari, and Firefox in their recent versions, without the need for compatibility with MSIE or older browsers.

htmlcss

Answer №1

You can manipulate the font-size by resetting it for ::marker

li:not(.active) {
  font-size:0;
}
li::marker {
  font-size:initial;
}


/**/
ol li{
  float:left;
  padding-right:20px;
}
<ol>
  <li>Products</li>
  <li class="active">Customer</li>
  <li>Payment</li>
</ol>

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

Passing a value from a prop to a click event that is dynamically created within an SVG Vue.js

Currently, I am in the process of developing a map component using a JSON array and implementing a click event handler for each item. The objective is to toggle the CSS style to color the item when clicked, which is functioning as expected. However, my goa ...

javascriptcssvue.jssvgevents

Enhance your Bootstrap navigation menu with eye-catching hover effects

Hey everyone, I'm a beginner in web development and I'm attempting to incorporate a hover effect into my navigation menu. I want it to look like the first example in this link: https://codepen.io/Calloumi/pen/vndlH I've tried to replicate t ...

htmlcssbootstrap-4

Implementing HTML tags in C# code

Below is an example of HTML script: <h1> This is heading one </h1> <p> This is paragraph. </p> I would appreciate any recommendations on how to add <html></html> tags to the above script using C#. ...

c#htmlvisual-studio-2010

What is the method for activating -webkit-animation/transition-property for :before and :after pseudo elements?

Is there a way to activate the -webkit-animation for :before and :after pseudo elements? It seems that in this demo http://jsfiddle.net/4rnsx/, the animation is not working for :before and :after elements. I am attempting to make it work using Mootools ...

csswebkitcss-transitionspseudo-element

OnePageCheckout may result in empty boxes being displayed due to OneStepCheckout CSS styling

Seeking advice for an issue with the Magento OneStepCheckout module. Upon checkout, there are three columns: customer data (working fine), payment options (selectable via checkbox), and details about the chosen payment method. Unfortunately, the informati ...

htmlcssmagentopaypalonestepcheckout

What could be the reason for the lack of response from the jquery element on an

Recently, I've been working on a jQuery project with sticky headers. However, when I tested it on my iPad, I noticed a slight delay and the header jumping around the page. I'm wondering if this issue can be resolved within the code itself or if ...

javascriptjqueryhtmlcss

What is the best way to incorporate a smooth transition for an object as it appears on the screen in React?

After configuring my code to display a component in the HTML only if a specific hook is set to true, I encountered an issue with a CSS transition. The problem arises because the 'open' class is triggered at the same time the element becomes true, ...

javascripthtmlcssreactjs

What is special about this element, textarea?

Hey there, I've got this JavaScript code that currently works on all textarea elements on the site. However, I'd like it to only work on one specific element. function limits(obj, limit) { var text = $(obj).val(); var str_length = $(obj) ...

javascriptjqueryhtmlthis

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

Paragraph Separated by Bullets Without Bullets At End of Line

I need assistance in creating a unique type of list that I call a "bullet separated paragraph list" by using a javascript array of strings. For example: item • item • item • item • item     item • item • item • item item • ...

javascripthtmlcss

Creating a replica of Airbnb using Bootstrap 5: Transforming the search bar into a button

I am looking to implement a search bar button similar to the one on airbnb using bootstrap 5, like this example: https://i.sstatic.net/oIIzv.png Here is an example of HTML code that you can use: <button type="button" class="btn btn-ligh ...

htmlcsstwitter-bootstrapbootstrap-5

Executing PHP code within the .html() jQuery function

Are you trying to update a link's text content dynamically using jQuery? <a id="btnExistReceiver" class="btn btn-app"> <i class="fa fa-user"></i> <?= __('Existing Receiver') ?> ...

phphtml

Creating a dynamic table layout with Bootstrap

Can someone help me figure out how to make this table responsive using Twitter Bootstrap 4? Here's the JS Fiddle Link for reference. <div class="some-table-section"> <div class="container"> <table class="table some-table"> ...

htmlcsstwitter-bootstrapbootstrap-4

Ways to align text within a table cell on a background using CSS

I'm attempting to print jukebox strips with designated corner markings. The code I have written generates the HTML page for displaying the strips, allowing users to then print them. Jukeboxes typically feature selection buttons labeled ABCDEFGHJK and ...

htmlcss

Creating a secondary title for a Bootstrap Navigation Bar

I have a unique Bootstrap 4 website that features a navbar. The navbar consists of a special brand section with an image and title text, followed by the rest of the navbar elements. You can view it here: https://jsfiddle.net/zmbq/aq9Laaew/218793/ Now, I a ...

htmlcssbootstrap-4navbarnav

The functionality of Anchor `<a>` tags is compromised in Chrome when using the hashtag symbol (#)

Below is the code I have implemented on my website: <li><a href="/explore/#Sound">Sound</a></li> (This menu is visible on all pages) <a id="Sound"><a> (This is on the specific page where I want to link to) I have at ...

htmlgoogle-chromecross-browser

My challenges with optimizing positioning in Media Queries for Hover Buttons

After completing the coding for all Smartphone devices, I moved on to working on Tablets. However, I encountered an issue during this process as I am unsure of how to fix it. Here is a preview of my "Section Skills" layout for mobile: View Section on Mobi ...

htmlcssimagemedia-queriestablet

What is the best way to create space between three columns in Bootstrap?

Despite my efforts to find a solution on Stackoverflow, I have not been able to locate exactly what I need. I am trying to evenly space and center three columns across my page. However, when I assign col-md-4 to each column, they end up too close together ...

htmlcsstwitter-bootstrap

Unable to showcase information in the center of an HTML document

Hello, I'm facing an issue with my HTML page that has a left vertical nav-bar. Despite my efforts, I can't seem to display content (text) in the center of the page as shown in the screenshot with the red oval. I've attempted inserting text ...

javascripthtmlcssbootstrap-5

Utilizing the enter key function for form submissions on lists in AngularJS

In my AngularJS project, I am working on an account details page where users can update their personal information. The interface allows for multiple phone numbers and email addresses to be added. Currently, the functionality works well with mouse input or ...

htmlformsangularjsform-submit