How to Remove The Styles from The Pseudo Element -Internal-Input-Suggested

CSS: How to remove pseudo elements (after, before,...)?

p:after {
   content: none;
}

none is the official value to set the content, if specified, to nothing.

http://www.w3schools.com/cssref/pr_gen_content.asp

How to remove pseudo-element styles from the first element?

here you go:

.col-sm-6:first-child:after {
    height: 0;
}

jsBin demo

Remove ::before or ::after pseudo element CSS definition

You should just apply the pseudo-element to labels that are children of .required using the child combinator >:

ul.form li.required > label::after
{
    content: " *";
    font-weight: bold;
    color: #f66;
}

The > combinator has better IE compatibility (IE7 and up) than the ::after pseudo-element (IE9 and up). If you're able to use ::after, there is no reason not to use >. In fact, IE support for pseudo-elements is so inconsistent that IE8 recognizes CSS2 :after but not CSS3 ::after. Your code would thus not work on IE8 unless you use :after, and to support IE7 and older you need a JavaScript fix.

Remove :focus outline style from ::before and ::after pseudo elements

You need your CSS selector to be more specific or match what Boostrap is doing in this case it's actually a box-shadow not outline:

.custom-control-input:focus~.custom-control-label::before {
  box-shadow: none;
}

Sample: https://jsfiddle.net/q2rjxzob/1/

Here's a trick the focus is always on the input itself that's what keeps it accessible. Use your development tool to activate the :focus and see where the styles are being applied. Select the :before element to see:

How to remove or disable before and after pseudo classes?

Use colon only one time

#selector:after {
    display: none;
}

Changing pseudo-element style from javascript

Since pseudo-elements do not exist in the DOM, they cannot be accessed in Javascript.
The workaround is to create a <span> instead of using :before and the same logic has to be applied.

What is the simplest way to clear all pseudo classes on an element?

If you are able to put the classes inside some wrapper id you can prevent the pseudo-classes to take effect due to specificity:

body {  background: black;}.classname {   color:#f00;}.classname:hover {   color:#0f0;}.classname:active {   color:#00f;}#a .classname {   color:#fff;}

<div class="classname">all pseudo works</div>
<div id="a">  <div class="classname">none of the pseudo works</div></div>

Styles for all Globally pseudo element like :before?

'*' is the universal selector that matches every element in your dom. It is possible to extend this selector call with pseudo selectors like :before and :after.

So you can use: *:before, *:after {...}
See this example: https://codepen.io/anon/pen/vPRgmL

EDIT:

Your code does not work because of the specificity of your universal selector.

'div' has a higher specificity than '*' so div wins here.
See more here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Changing CSS pseudo-element styles via JavaScript

EDIT: There is technically a way of directly changing CSS pseudo-element styles via JavaScript, as this answer describes, but the method provided here is preferable.

The closest to changing the style of a pseudo-element in JavaScript is adding and removing classes, then using the pseudo-element with those classes. An example to hide the scrollbar:

CSS

.hidden-scrollbar::-webkit-scrollbar {
   visibility: hidden;
}

JavaScript

document.getElementById("editor").classList.add('hidden-scrollbar');

To later remove the same class, you could use:

document.getElementById("editor").classList.remove('hidden-scrollbar');

Removing an element added by ::before pseudo selector

Only CSS can remove pseudo element, so you need to have an other class that display:none; the before. First declare that class in the CSS :

.header {
  ...
  &::before {
    ...
    position: absolute;
    height: 0.5rem;
    ...
  }

  &.no-before::before{
    display:none;
  }
}

Then, when you want to remove it :

$('.header').addClass('no-before'); //Remove before
$('.header').removeClass('no-before'); //Re-add before

---

Related Topics