@Lord_Dantes

Каким образом вписать ::before как свойство в тег?

Есть
<div></div>
Нужно из этого сделать что-то вроде такого:
<div ::before="background:red"></div>
Абсолютно любим образом, единственное что не подходит так это через css или <style></style>
Интернет листаю уже полтора часа, пока ничего не нашёл я уверен это уже есть 100% ...
Всем спасибо, за любую информацию.
  • Вопрос задан
  • 361 просмотр
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
я уверен это уже есть 100%

Ошибаешься =) Этого нет в принципе.
Псевдоэлемент он потому и псевдо, что он как бы есть, но его нет.

В общем завязывай листать интернет по этому вопросу, и делай как посоветовала Ankhena — дополнительным элементом.

Я могу посоветовать один трюк, но его применение сильно ограничено ввиду использования свойств не по назначению.

https://codepen.io/delphinpro/pen/BqByzp

Еще вариант — использовать классы, но опять же подойдёт только если у вас цветов ограниченная палитра.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
pavelcarcass
@pavelcarcass
ИТ-менеджер из г. Иркутска
Если не через отдельный css файл со стилями и не через тэг style, то как насчет JavaScript? Работает, например, такой трюк:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="testDiv">СОДЕРЖИМОЕ ДИВА</div>
</body>
<script>
var UID = {
	_current: 0,
	getNew: function(){
		this._current++;
		return this._current;
	}
};

HTMLElement.prototype.pseudoStyle = function(element,prop,value){
	var _this = this;
	var _sheetId = "pseudoStyles";
	var _head = document.head || document.getElementsByTagName('head')[0];
	var _sheet = document.getElementById(_sheetId) || document.createElement('style');
	_sheet.id = _sheetId;
	var className = "pseudoStyle" + UID.getNew();
	
	_this.className +=  " "+className; 
	
	_sheet.innerHTML += "\n."+className+":"+element+"{"+prop+":"+value+"}";
	_head.appendChild(_sheet);
	return this;
};

var div = document.getElementById("testDiv");
div.pseudoStyle("before","content","'перед'").pseudoStyle("before","color","green").pseudoStyle("before","background","black");
div.pseudoStyle("after","content","'после'").pseudoStyle("after","color","red").pseudoStyle("after","background","yellow");
</script>
</html>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы