Публикации по теме 'pseudo-element'
Как определить, был ли нажат псевдоэлемент в JS
Сегодня мне захотелось построить что-то очень простое. Элемент, который можно закрыть с помощью маленькой кнопки, всплывающей при наведении курсора мыши. Однако кнопка не должна находиться в HTML/DOM, поэтому вместо нее я использовал псевдоэлемент ::after . Эта часть до сих пор была довольно простой.
Я подготовил пример в CodePen. Это очень простой код, который позволяет элементу ::after с символом x появляться в элементе .dismissable , когда он :hover ed...
Как изменить свойства псевдоэлемента с помощью JavaScript
Раньше единственным свойством псевдоэлемента, которое можно было изменить с помощью JavaScript, было content . Теперь, с помощью пользовательских переменных CSS (также называемых пользовательскими свойствами CSS) и JavaScript, мы теперь можем легко изменить свойства в :after и :before . Давайте посмотрим, как мы можем это сделать.
Если вы не знаете, что такое пользовательская переменная CSS, MDN очень хорошо объясняет это здесь .
Самым большим преимуществом пользовательских..
Вопросы по теме 'pseudo-element'
Странное поведение с CSS :first-child:before в Chrome
Я вижу что-то довольно странное в Chrome 10 с :first-child:before .
С этим HTML
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul>
<li>Four</li>...
16283 просмотров
schedule
03.01.2023
Псевдоэлемент CSS для применения первого символа элемента
У меня есть следующий контент в моем теге h1: «(Hello World)», поэтому я добавляю следующее в свой css, чтобы изменить первый символ этого элемента:
h1:first-letter { font-size:63px; color:#510007; font-family:Helvetica; }
Но, как я заметил,...
6373 просмотров
schedule
12.12.2023
Селекторы соседних элементов и псевдоэлемент :before в Chrome 10
Это странно. <OL> на http://www.madebypaz.com/profile использует псевдоэлемент :before для аннотаций диаграмма (азбука и изображение). Я использую селекторы смежных братьев и сестер для этого так:
#profiletext ol li:before {...
1361 просмотров
schedule
10.04.2022
CSS: псевдоэлемент after в сочетании с [checked]: разные элементы after не работают?
Я пытаюсь поднять свои веб-формы, стилизуя свои собственные радиокнопки и флажки. Для этого я скрываю само радио/флажок и создаю на этикетке элемент, указывающий состояние, с помощью псевдокласса :after, например так:
.pn_multi label{...
6479 просмотров
schedule
19.02.2023
Проблема с отрисовкой стрелок CSS в Firefox
Контекст
Я сделал всплывающую подсказку на чистом CSS с псевдоэлементами :before и :after для стрелки.
Рендеринг отличается от Chrome 16 до Firefox 9 и 10.
Вы видите, что не так?
Скриншот Chrome
Скриншот Firefox
Демо...
2294 просмотров
schedule
13.07.2022
Использование псевдоэлементов до и после на фоновом изображении
Я хочу создать элементы навигации из трех (фоновых) изображений, причем первое и последнее имеют фиксированную ширину, а центральная - переменную ширину, в зависимости от ширины текста в элементе навигации. Меня заставили поверить, что использование...
15732 просмотров
schedule
25.04.2022
IE8 до того, как контент не отображается
Вот ссылка на страницу с нарушением: http://www.wrightspecialty.com/brokers-agents-questionnaire.html?view=foxcontact .
Есть ограничение на конструктор форм, который я использую. Невозможно вставить текст, если это не метка для текстового поля,...
688 просмотров
schedule
17.10.2022
jQuery выбирает псевдоэлемент данного элемента
Возможный дубликат: манипулирование Псевдоэлементы CSS :before и :after с использованием jQuery
Если у меня есть element , как обратиться к соответствующему псевдоэлементу с помощью jQuery ?
Я хочу сказать, например, если у меня...
1209 просмотров
schedule
03.12.2023
Использование CSS: до и: после псевдоэлементов со встроенным CSS?
Я делаю подпись электронной почты HTML с помощью встроенного CSS (т.е. CSS в style атрибутах), и мне любопытно, можно ли использовать псевдоэлементы :before и :after .
Если да, то как мне реализовать что-то подобное с помощью встроенного CSS?...
198389 просмотров
schedule
11.11.2022
Почему добавление helper: clone; к этому перетаскиваемому элементу пользовательского интерфейса предотвратить его перетаскивание?
Все, что я хочу, это иметь <ul> с тенью блока, которая появляется над его дочерними элементами <li> , и чтобы эти элементы можно было сортировать в <ul> .
Вот jsfiddle и вот код:
HTML:
<ul class="shadowed">...
4126 просмотров
schedule
09.11.2022
Показывать :after при наведении курсора на родительский элемент через CSS
Можно ли display:block; псевдоэлемент :after при наведении курсора на сам родительский элемент?
#myDiv{
position:relative;
width:50px;
height:50px;
border-style:solid;
background-color:red;
}
#myDiv:after{
position:absolute;...
18879 просмотров
schedule
02.12.2023
Можно ли как-то стилизовать iframe до/после псевдоэлемента?
Как следует из названия, есть ли способ стилизовать псевдо-iframes before / after ? Без обертывания iframe другим div или еще что-нибудь?
Я пытался стилизовать его как любой другой элемент, но безуспешно:
iframe::before {
content:...
13202 просмотров
schedule
08.04.2023
Почему невозможно объединить псевдоэлементы/классы, зависящие от поставщика, в один набор правил?
В CSS можно стилизовать placeholder текст во входных данных, используя комбинацию псевдоклассов и псевдоэлементов, зависящих от поставщика (чтобы получить наилучшее кросс-браузерное покрытие).
Все они имеют одни и те же основные свойства...
6448 просмотров
schedule
19.07.2022
Как раскрасить первый символ звездочки в теге p
Я думал, что это будет легко сделать с помощью псевдоэлемента ::first-letter , но это не работает!
У меня есть
<p>* Required Fields</p>
и я хочу, чтобы * был красным!
Любые идеи? Обратите внимание, что я не могу изменить...
740 просмотров
schedule
25.05.2022
Семейство шрифтов в псевдоэлементе
Кажется, Internet Explorer 8,9,10 всегда использует один и тот же (системный) шрифт. На самом деле Internet Explorer вообще не заботится о font-family . Важно сочетание display:table-cell и :before или :after :
<!DOCTYPE html>...
2702 просмотров
schedule
13.11.2022
Псевдоэлемент :after не работает в Safari
У меня есть стилизованное предложение с динамическим текстом. Иногда текст слишком длинный и выталкивает привязку в конце за пределы поля. Я хочу, чтобы текст переносился после span.price-difference , но кнопка привязки располагалась справа от p ....
24744 просмотров
schedule
25.05.2022
Firefox: щелчок по псевдоэлементу CSS не вызывает событие щелчка
Вот моя кнопка:
<button class="btn-close">Close alert</button>
... со следующим CSS:
.btn-close{
position: relative;
height: 30px;
border: none;
background-color: #332b2a;
color: #fff;
outline: none;...
2513 просмотров
schedule
23.06.2023
Как изменить псевдоэлементы css в javascript?
я хочу изменить ниже :before значение top псевдоэлемента css через javascript или jQuery динамически ... как я могу это сделать?
#buble{
height:70px;
width:980px;
background-color:#bce5a5;
display:none;
-moz-border-radius:5px;...
2545 просмотров
schedule
16.04.2023
Поместите псевдоэлемент в область карты HTML ›
Я использую HTML map , и мне нужно использовать псевдоэлементы на его area для отображения значков и их относительного позиционирования.
Редактировать: я не могу жестко закодировать его координаты , потому что я собираюсь иметь дело с большим...
3233 просмотров
schedule
10.04.2023
Проблема CSS с z-index на ::before при анимации
Знаете ли вы, почему z-index не работает с ::before, когда я анимирую родителя?
Здесь вы можете найти то, что я имею в виду: http://jsfiddle.net/8x3Wa/6/
.object {
position: relative;
z-index: 1;
-webkit-animation: scale 1s...
743 просмотров
schedule
20.12.2022
