In CSS Use "Display:None" on The Element, But Keep Its ":After"

In CSS use display:none on the element, but keep its :after

No, it is not possible.

Pseudo elements are rendered like children:

<span id="myspan">whatever<after></span>

And display:none hides the element including all children.

EDIT 1

JavaScript is your best option in my opinion. Even without jQuery changing text is not hard:

document.getElementById("myspan").innerHTML = "*";​

Demo

EDIT 2

However, if you really want to do it with CSS, you can use negative text-indent to hide the text and relative positioning to show the asterisk:

#myspan {    
    text-indent: -9999px;
    display: block;
}

#myspan:before {
    content: '*';
    position: absolute;
    top: 0;
    left: 9999px;
}

Demo

​

Use of display:none but still keep the space used

display:none; does NOT take any space, as you can see in your own snippet. visibility: hidden however, DOES use the empty space.

.mySpan1 {display: none; }.mySpan2 {visibility: hidden; }

<div><label>Name</label><input type="text" id="personName" name="personName" /><br/><span class="mySpan1">Text that can be displayed or not</span> text after display: none</div><div><label>Last name</label><input type="text" id="personLastName" name="personLastName" /><br/><span class="mySpan2">Text that can be displayed or not</span> text after visibility: hidden;</div>

Is there an opposite to display:none?

display: none doesn’t have a literal opposite like visibility:hidden does.

The visibility property decides whether an element is visible or not. It therefore has two states (visible and hidden), which are opposite to each other.

The display property, however, decides what layout rules an element will follow. There are several different kinds of rules for how elements will lay themselves out in CSS, so there are several different values (block, inline, inline-block etc — see the documentation for these values here ).

display:none removes an element from the page layout entirely, as if it wasn’t there.

All other values for display cause the element to be a part of the page, so in a sense they’re all opposite to display:none.

But there isn’t one value that’s the direct converse of display:none - just like there's no one hair style that's the opposite of "bald".

CSS - display: none; not working

Remove display: block; in the div #tfl style property

<div id="tfl" style="display: block; width: 187px; height: 260px;

Inline styles take priority over an external CSS file.

Is there a selector to exclude display: none elements?

If those display styles are declared inline then you can use the following selectors: div[style*="display: none;"] (if element has inline style attribute containing "display: none;" then apply style)

Attribute Selectors:

The CSS attribute selector matches elements based on the presence
or value of a given attribute.

Src: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Attribute Contains Selector:

When looking to find an element based on part of an attribute value,
but not an exact match, the asterisk character, *, may be used within
the square brackets of a selector. The asterisk should fall just after
the attribute name, directly before the equals sign. Doing so denotes
that the value to follow only needs to appear, or be contained, within
the attribute value.

Src: https://learn.shayhowe.com/advanced-html-css/complex-selectors/

CSS `display:none` effect on DOM

display: none; will just hide the element, but all the listener events will still be there. It won't be removed from the DOM.
But the difference between visibility: hidden and display: none is that, in first case, the tag and content inside will be rendered, whereas in second case the tag won't be rendered.

visibility: hidden;

div tag is rendered and affecting document flow

display: none;

div not rendered

What is the difference between visibility:hidden and display:none?

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

For example:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Replacing [style-tag-value] with display:none results in:

test |   | test

Replacing [style-tag-value] with visibility:hidden results in:

test |                        | test

display:none and inline-block at the same time

EDIT: working jsfiddle with toggle: jsfiddle.net/7seWm/2

working jsfiddle: http://jsfiddle.net/7seWm/

if you want to change it with jquery, use this:

css:

div {display:none;}

jquery:

$("#divid").css("display", "inline-block");

Check, using jQuery, if an element is 'display:none' or block on click

You can use :visible for visible elements and :hidden to find out hidden elements. This hidden elements have display attribute set to none.

hiddenElements = $(':hidden');
visibleElements = $(':visible');

To check particular element.

if($('#yourID:visible').length == 0)
{

}

Elements are considered visible if they consume space in the document.
Visible elements have a width or height that is greater than zero,
Reference

You can also use is() with :visible

if(!$('#yourID').is(':visible'))
{

}

If you want to check value of display then you can use css()

if($('#yourID').css('display') == 'none')
{

}

If you are using display the following values display can have.

display: none

display: inline

display: block

display: list-item

display: inline-block

Check complete list of possible display values here.

To check the display property with JavaScript

var isVisible = document.getElementById("yourID").style.display == "block";
var isHidden = document.getElementById("yourID").style.display == "none"; 

---

Related Topics