Как изменить содержимое с помощью CSS?

Question

ВНИМАНИЕ: Я не рекомендую это делать. Это уродливый хак.

У меня есть код (свернутый для примера)

<div id="somecontent"> 
    <a name="content"></a> 
    Content to be changed 
</div> 

JSFiddle: https://jsfiddle.net/zalun/o733uyvs/

я хотел бы изменить "Содержание быть изменены" с помощью CSS. Возможно ли это (все уродливые хаки включены)? Это легко, когда HTML изменен (<span> добавлен), как во втором блоке в упомянутой скрипке.

Answer 1

Примечание: То, что вы пытаетесь сделать, не рекомендуется. Я предоставляю вам решение, потому что я думаю, что у вас нет доступа к исходному HTML или ваш контент генерируется динамически. Я бы по-прежнему предлагал вам слишком либо изменить исходный файл, либо изменить узел DOM с помощью JavaScript.

Я бы сказал «Нет» и «Да».

Почему нет?

Это текстовый узел. Вы не можете манипулировать узлами DOM с помощью CSS. Для этого вам нужно использовать JavaScript.

Почему да? (Использование уродливых хаков), как?

Используя content свойство, как вы уже используете, но вы не можете изменить DOM, так что вы можете сделать его супер некрасиво как

Demo

#somecontent { 
    color: transparent; 
    position: relative; 
} 

#somecontent a:before { 
    content: "My new content"; 
    color: #000; 
    position: absolute; 
} 

---

JavaScript Решение:

Demo

// You'll see text flicker 
var t = document.getElementById('somecontent'); 
t.textContent = 'New Text';