2

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

Kashif Imran
  • 579
  • 3
  • 9
  • 29
  • 3
    It's not possible to alter text nodes via CSS. you probably need to use JavaScript to achieve that. – Hashem Qolami Oct 07 '14 at 12:19
  • Using pure css You cant. – webkit Oct 07 '14 at 12:19
  • Css is not suited for that – Justinas Oct 07 '14 at 12:21
  • btw, CSS is a 'Style' sheet.. it's not used for content, except arguebly special cases – webkit Oct 07 '14 at 12:21
  • http://stackoverflow.com/questions/7896402/how-can-i-replace-text-through-css check this SO link, it may helps you. – Domain Oct 07 '14 at 12:24
  • I can very easily do it using javascript and is the right thing to do in production code. But this is a assignment given to me in my css class. These type of assignment are intended to make us go through all the things that can be done using css. Just because there are other ways of doing it does not mean that it cannot be done using css and i feel it is unfair to give negative points for it – Kashif Imran Oct 07 '14 at 13:17
  • @kashif: I can only guess but maybe the expectation is for you to specify what exactly is the need. "Replace" as many people have indicated is not possible with CSS. Creating an illusion as though it has been replaced is possible. But again, CSS should not really be put to use for such things. – Harry Oct 07 '14 at 13:32

5 Answers5

2

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>
Giannis Grivas
  • 3,374
  • 1
  • 18
  • 38
1

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?).

Paul
  • 8,974
  • 3
  • 28
  • 48
0

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/

Tomer
  • 17,787
  • 15
  • 78
  • 137
  • I'm commenting on your answer, but it goes for all of them.. there's really no help in giving a hack solution to a question that the answer is simply no.. Yes maybe it works for this specific sentence with the exact position and font size.. but it's definitely bad practice and not the right approach – webkit Oct 07 '14 at 12:36
  • @webkit - OP did not define in his question what exactly he needs, If it's a static page that's never going to change, why not use this approach? – Tomer Oct 07 '14 at 12:40
  • 2
    Because, first I think posting answers on SO should be such that other people can learn from.. No one could take and use this solution for a similar issue.. and if they tweaked it and DID.. then it's even worse because using CSS for this type of stuff is bad code and shouldn't be taught.. – webkit Oct 07 '14 at 12:44
  • Secondly, the OP did use the word 'replace' in his title and in his question.. which none of these answers really do.. am i wrong? – webkit Oct 07 '14 at 12:47
  • 1
    @webkit - first of all, i specifically mentioned that it's only suitable for specific use case, secondly, people can definitely learn from these answers, the technique of using pseudo elements is not known to all people, and even if they don't use it for this case, they can sure use it in other cases for other purposes and third, the fact that the OP used the word replace does not prove anything, maybe he didn't know he can hide it? – Tomer Oct 07 '14 at 12:52
  • this is only my opinion ofcourse, but the fact the technique used isn't known to all, is not a good enough reason to use it in the wrong way.. that's an excuse to post wildly bad practices just for the sake of showing a technique.. not good enough ;] – webkit Oct 07 '14 at 13:00
0

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>
Sir XtC
  • 166
  • 1
  • 9
-1

You can't do that with CSS but you can try it with HTML. Look at the following:

&ndash;&ndash;&gt;

This will make the "-->"

Hope it was useful

Wijnand M
  • 372
  • 1
  • 3
  • 12