I have a unordered list with in a div
<div class="myClass">
<ul>
<li>Login to your account</li>
<li>Visit the Accounts ? Invoices page</li>
<li>Click the <span class="bold">Pay Now</span> button</li>
</ul>
</div>
How can i replace "?" in the second li with "-->" using pure css
There is now way to do that with css only. You have to use js. BUT
if this character was enclosed by <div class="element">?</div> for example ,you could do this one:http://jsfiddle.net/csdtesting/uc8h6pz2/
.element {
text-indent: -9999px;
line-height: 0;
/* Collapse the original line */
}
.element::after {
content: "New text";
text-indent: 0;
display: block;
line-height: initial;
/* New content takes up original line height */
}<div class="myClass">
<ul>
<li>Login to your account</li>
<li>Visit the Accounts
<div class="element">?</div>Invoices page</li>
<li>Click the <span class="bold">Pay Now</span> button</li>
</ul>
</div>It's very hacky and in no way the right way to go, but it works (however only for the exact case described above).
.myClass ul li:nth-child(2) {
content: '->';
position: absolute;
left: 10.5em;
background: #fff;
}
As mentioned by others, for a job like this, CSS is not right tool. Add some javascript to do this job, it's way better as it doesn't care about the user's text zoom for example (which would break the CSS "solution" probably).
var el = document.getElementsByClassName('myClass')[0].children[0].children[1];
var text = el.innerHTML;
el.innerHTML = text.replace('?','-->');
See DEMO for the vanilla js solution.
Though, even better would be to find the source of the question mark ?, it looks like there's some encoding problem (utf-8?).
Using pure css you can do it, but only if the question mark is in the exact same position every time:
<div class="myClass">
<ul>
<li>Login to your account</li>
<li class="replace">Visit the Accounts ? Invoices page</li>
<li>Click the <span class="bold">Pay Now</span> button</li>
</ul>
</div>
.replace{
position: relative;
}
.replace:after{
position: absolute;
content: '-->';
background: #fff;
left: 120px;
top: 0;
font-size: 12px;
}
fiddle: http://jsfiddle.net/kw4838dt/
I found this article https://www.geeksforgeeks.org/how-to-replace-text-with-css/
<html>
<head>
<style>
.toBeReplaced span {
display: none;
}
.toBeReplaced:after {
content: "This text replaces the original.";
}
</style>
</head>
<body>
<p class="toBeReplaced"><span>Old Text</span></p>
</body>
</html>
You can't do that with CSS but you can try it with HTML. Look at the following:
––>
This will make the "-->"
Hope it was useful
