How to use CSS to replace or change text?
You could do something crazy like this.
live demo
.lfr-panel-title span{
display:none;
}
.lfr-panel-title:after{
content: "links";
}
But like everyone points out.. its not recommended.
Change text using CSS
Seems like you are already using the ::after
pseudo element to do your underine. This means you can't hide the text which is already there in the anchor tag. Try this solution
.store-mart-lite-cat-prod-content .store-mart-lite-cat-prod-btn a {
font-size: 0px; /* workaround */
}
.store-mart-lite-cat-prod-content .store-mart-lite-cat-prod-btn a::before {
content: 'Ver Productos';
font-size: 14px;
}
Best way to replace a text using CSS
If you really need to do such things in CSS, the following is a little more logical and a little less risky (with the Usual CSS Caveats in mind):
<style>
.company-name:after{
content: "New Company Name";
}
</style>
<span class="company-name"></span>
That is, use an element with empty content, so you don’t need any trick to hide the dummy content.
CSS - replace part of content text
No, in pure CSS it's not possible to change the content, but you could cheat by overlapping something, e.g.
.replacer {
font-family: monospace;
position: relative; }
.replacer::before {
background: #fff;
position: absolute;
content: "***";
}
Codepen demo
or, another tricky way could be creating and loading a special font that maps the symbols A
, B
and C
into the asterisk sign (through the unicode-range
property, https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range)
in javascript you would only need to replace the textContent
property of the element
var el = document.getElementsByClassName('replacer')[0]
el.textContent = el.textContent.replace(/^.{3}/, '***');
How to use CSS to replace text?
.skills{font-size:0;}
.skills a{font-size:20px;}
.skills a:after {content: ", "; font-size: 20px;}
.skills a:last-child:after {content: ""; }
.skills:before {
content: 'Class: ';
font-size:20px;
}
<span class="skills">Type:<a href="....../type/aaa/">aaa</a>, <a href="...../type/bbb/">bbb</a></span>
CSS - Change Element tag and replace its content
Your best option for this situation is to style the class as an h3, overriding the h1 styling. As long as the styling for this class is below the styling for h1, it should take precedence.
You'll also need to hide the original content because content
doesn't replace content.
For example:
h3 {
font-size:2em;
color:#424242;
}
.class {
visibility: hidden;
}
.class::after {
content: 'Replacement Text';
visibility: visible;
font-size:2em;
color:#424242;
}
<h3 class="class">text</h3>
Using CSS to replace text dynamically
Your CSS is incorrect, the h4
is not a child of the span
it's a sibling so use +
, like so
ul {
list-style: none;
}
li#onroad span.ui-state-active+h4 {
visibility: hidden;
}
li#onroad span.ui-state-active+h4:before {
visibility: visible;
content: "Complete";
}
<ul>
<li id="onroad" class="onroad boxSizing" data-stageid="4" data-invalidot="1" data-desc="Heading your way">
<span class="material-icons ui-state-default ui-state-active" aria-hidden="true"></span>
<h4 class="text" role="none">On Road</h4>
<span class="line ui-state-default ui-state-active" aria-hidden="true"></span>
</ul>
Related Topics
How to Keep Aspect Ratio of a Background-Image
Vertically Center in Viewport Using CSS
Increase Size of List-Style-Bullet Type
How to Use El for External CSS Files with Jsf
Limit the Width of a Column to the Width of a Particular Grid Item
Bootstrap.Css: .Container:Before Display Table
Css: Borders Between Table Columns Only
How to Write CSS Fallbacks for Vh Vw
Vertically Center Content of Floating Div
How to Draw a Partial Circle Outline in CSS (Open Ring Shape)
How to Use Font-Weight with Font-Face Fonts
Ie10/11 Uses Transition:-Webkit-Transform