Могу ли я использовать CSS для добавления маркера к любому элементу?
Я предпочитаю санировать вход пользователя один раз (когда пользователь вводит эти данные), а не каждый раз, когда данные визуализируются. Для этого добавьте в свою модель следующее:
# in app/models/user.rb
def portfolio=(url)
if url.present?
url = url.match(/https?:\/\//) ? url : "http://#{url}"
write_attribute(:portfolio, url)
end
end
Затем используйте его в своем представлении следующим образом:
<%= link_to truncate(@user.portfolio_title, length: 17),
@user.portfolio, rel: 'noopener', target: '_blank' %>
Примечание. Для соображений безопасности вы можете использовать target: '_blank' всегда вместе с rel: 'noopener'.
9 ответов
Хотя вы можете использовать псевдоселектор :before для добавления символа «-» или «•» перед вашим элементом, на самом деле он не заставляет ваш элемент вести себя как точка с маркером. Ваш элемент может выглядеть как пуля, но на самом деле это просто грязный хак, и его следует избегать!
Чтобы ваш элемент (1) выглядел как точка маркера и (2) вел себя как точка маркера, вы должны установить атрибуты display, list-style-type и list-style-position этого элемента.
ПРИМЕРНЫЙ КОД
h1 {
display: list-item; /* This has to be "list-item" */
list-style-type: disc; /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type */
list-style-position: inside; /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position */
}<h1>My H1 text here</h1>СКИДКА
Вы можете использовать псевдоселектор :before, чтобы добавить все, что вы хотите, перед вашим тегом.
h1:before {
content: "- "
}<h1>My H1 text here</h1> Дайте имя класса абзацу или любому элементу и примените следующий код (я дал имя класса как bullet):
.bullet::before {
content: '';
position: absolute;
bottom: 7px;
left: -10px;
width: 3px;
height: 3px;
background-color: #000;
border-radius: 50%;
}
Вы можете сделать что-то вроде этого:
h1:before {
content:"• ";
}
См. Fiddle:
Как-то так должно работать
h1, h2, h3 {
background: url("the image link goes here") 0 center no-repeat;
padding-left: 15px; /* change this to fit your needs */
}
Нет, list-style и list-style-image предназначены только для тегов ul и ol, вам придется вернуться к первому методу или сделать что-то с помощью js
http: //www.w3schools.com/css/css_list.asp http://www.w3schools.com/cssref/pr_list-style-type.asp
Очень простой способ создания маркера с использованием before css - это использование семейства шрифтов ... таким образом, нет необходимости включать графику и т. Д.
вот код класса:
.SomeClass:before {
font-family: "Webdings";
content: "= ";
{
list-style-type зарезервировано только для ul. Вы можете использовать <h1 class="bullet"> с псевдоэлементом :before.
Просто используйте <p>• </p>, чтобы создать точку перед вашим словом