2015-11-30 2 views
2

Моя главная цель его добавить содержимое в начало DIV с помощью CSS содержание property.I был в состоянии сделать это, используя следующий код CSS:Можно ли назначить CSS для свойства content css?

.advads::before { 
     content: "Advertisement"; 
     display: block; 
    } 

Теперь проблема мне нужно назначить некоторые CSS для содержание, басически background-color и некоторые padding. есть ли способ сделать это БЕЗ добавления HTML?

то, что я на самом деле пытается достичь его, чтобы добавить «реклама» название, как в следующем примере: link to example THx

+5

Параметр 'content' собственно ty (несмотря на название) не должно содержать фактический контент. Он предназначен для улучшения стиля, а не для владельца контента. Вместо этого используйте фактический элемент. –

+0

Вы можете использовать jquery для достижения этого. – krsoni

+0

Я думаю, что лучшим решением является использование jquery, но вы можете это сделать. Https://jsfiddle.net/2Lzo9vfc/230/ –

ответ

3

Да. Вы можете стиль pseudo-elements как и любой другой:

.advads { 
 
    width:200px; 
 
    height:80px; 
 
    background:#aaa; 
 
    position:relative; 
 
} 
 
.advads:after { 
 
    content:"Advertisement"; 
 
    display: block; 
 
    position:absolute; 
 
    top:100%; 
 
    left:0; 
 
    right:0; 
 
    color:#000; 
 
    width:100px; 
 
    margin:auto; 
 
    background:#fff; 
 
    text-align:center; 
 
    padding:4px; 
 
} 
 
.advads:before { 
 
    content:""; 
 
    display: block; 
 
    position:absolute; 
 
    top:100%; 
 
    left:0; 
 
    right:0; 
 
    background:#ffffff; 
 
    color:#000; 
 
    border-top:1px solid #000; 
 
    margin-top:11px; 
 
}
<div class="advads">Ad</div>

1

Да, просто добавьте необходимые свойства непосредственно к правилам для псевдо-элемента, например:

.advads::before{ 
    background:red; 
    content:"Advertisement"; 
    display:block; 
    padding:5px; 
} 
+0

, который повлияет на весь div ... im, который будет влиять только на контентное свойство. –

+0

Вы даже попробовали? Любые стили, которые вы добавляете к этому правилу, будут * только * применяться к этому конкретному псевдоэлементу 'before'. – Shaggy

0

Я думаю, что лучший способ будет использовать семантический HTML и pseudoelements, если вы хотите чего-то добиться, как в указанном примере, это путь :

.heading { 
 
    text-align: center; 
 
    position: relative; 
 
    height: 30px; 
 
} 
 
.heading:before { 
 
    content: ""; 
 
    border-top: solid 1px #b9b9b9; 
 
    width: 100%; 
 
    height: 1px; 
 
    position: absolute; 
 
    top: 15px; 
 
    display: block; 
 
} 
 
.heading h3 { 
 
    font-size: 24px; 
 
    color: #333; 
 
    font-weight: bold; 
 
    background-color: white; 
 
    display: inline; 
 
    padding: 11px; 
 
    z-index: 5; 
 
    position: relative; 
 
}
<header class="heading"> 
 
    <h3>Advertisement</h3> 
 
</header>

Смежные вопросы