Conceal the unstyled element and reveal its adjacent sibling?

Question

Conceal the unstyled element and reveal its adjacent sibling?

I have come across some HTML code that I am unable to modify. Instead of using JS/jQuery, I prefer a solution with cross-browser compatible CSS.

The structure of the HTML is as follows:

<ul class="list">
    <li class="item">
        <a href-"#">Item One</a> |
    </li>
     <li class="item">
        <a href-"#">Item Two</a> |
    </li>
    <li class="item">
        <a href-"#">Item Three</a> |
    </li>
</ul>

There are unnecessary pipes in the list that I want to hide, and display only the <a> elements. I am looking for a better solution than just changing the text color to match the background. Ideally, I would like to achieve something similar to display: none;.

html css html-lists

Answer 1

Answer №1

To make the text inside the li element invisible, you can set the font size to 0 and give it a transparent color. Then, reset these properties back to normal for the link within the li:

li.item {
    font-size: 0;
    color: transparent;
}

li.item a {
    font-size: 16px;
    color: #000;
}

By following this approach, the li text will be hidden with no visible size, while the link remains properly styled.

Check out the JSFiddle demo for a visual example.

It's worth mentioning that using transparency is necessary in cases where browsers like Safari may have issues fully hiding the font when the size is set to 0.

Answer 2

To make the text inside the li element invisible, you can set the font size to 0 and give it a transparent color. Then, reset these properties back to normal for the link within the li:

li.item {
    font-size: 0;
    color: transparent;
}

li.item a {
    font-size: 16px;
    color: #000;
}

By following this approach, the li text will be hidden with no visible size, while the link remains properly styled.

Check out the JSFiddle demo for a visual example.

It's worth mentioning that using transparency is necessary in cases where browsers like Safari may have issues fully hiding the font when the size is set to 0.

Answer 3

Answer №2

Simplified:

.item {
    color: transparent;
}

.item a {
    color: #000;
}

Check out the demo on JS Fiddle.

This CSS style code makes the text within the li element invisible/transparent, while the text color of the a element is visible.

Answer 4

Simplified:

.item {
    color: transparent;
}

.item a {
    color: #000;
}

Check out the demo on JS Fiddle.

This CSS style code makes the text within the li element invisible/transparent, while the text color of the a element is visible.

Conceal the unstyled element and reveal its adjacent sibling?

Answer №1

Answer №2

Similar questions

Creating animations with an svg mask can be effective, however, it seems to only work properly

What could be causing render_template to fail when attempting to update the same parameters more than once?

Credit for the Position swipejs

How can the dropdownlist CSS be modified when it is clicked or hovered over?

Using scripted <svg> with <defs> and attempting to reference it via JavaScript results in failure

In order to design a v-btn-toggle with vertically aligned buttons, rather than horizontally

Display an element that has been tucked away, and then bring it to life

Creating a scrollable card layout specifically for small screens in HTML

Transform object into JSON format

What is the best way to trigger an onclick event for an input element with a type of "image"?

Switching the placement of my menu bar to the other side of my logo

Creating responsive images using Bootstrap CSS framework

display data labels within the chart - utilizing the power of angular.js in conjunction with chart.js

What is the best way to include Google Calendar in a div container while ensuring it is responsive?

Issue encountered when attempting to develop a countdown timer using Typescript

The div elements are constantly shifting positions when viewed in Internet Explorer

Collecting all the <td> elements within a single row

Creating line breaks for ToolTip titles in Material-UI can be achieved by using the appropriate syntax and

Is it secure to use a unique, static HTML/CSS website?

Adapting the Homepage Based on User Authentication