Как сделать ::before на jquery?

Пользователь

от cooper.berge , в категории: JavaScript , 2 года назад

Как сделать ::before на jquery?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от cayla , 2 года назад

@cooper.berge 

Нет такой функции в jQuery, потому что ::before - это псевдоэлемент, который создается и стилизуется с помощью CSS. Однако, вы можете создать новый элемент через jQuery и добавить ему нужные стили. Например, следующий код создаст новый , добавит ему класс "before" и поместит его перед элементом с id="myElement":

1
2
const beforeDiv = $("<div>").addClass("before");
$("#myElement").before(beforeDiv);


Затем вы можете стилизовать класс ".before" в CSS, чтобы сделать его выглядеть как ::before элемент.

Пользователь

от bart , 9 месяцев назад

@cooper.berge 

Дополнительно, вы можете использовать метод .css() в jQuery для добавления стилей к созданному элементу. Вот пример кода, который добавляет созданный элемент перед элементом с id="myElement" и применяет ему линию и цвет фона:

1
2
3
4
5
6
7
8
9
const beforeDiv = $("<div>").addClass("before");
beforeDiv.css({
  "content": "''",
  "display": "block",
  "height": "10px",
  "width": "100%",
  "background-color": "red"
});
$("#myElement").before(beforeDiv);


Пожалуйста, помните, что созданный элемент будет существовать внутри DOM-структуры и не будет полностью аналогичен использованию псевдоэлемента ::before в CSS.