html - para - selectores avanzados css

¿Puedo usar CSS para agregar un punto de bala a cualquier elemento?

Question

Pregunta bastante simple, pero no estoy seguro de si es posible. Quiero agregar una imagen para que actúe como una viñeta en todos los elementos <h1> . Sé que puedo lograr esto por:

<span class=''bullet''></span><h1>My H1 text here</h1>

con css:

.bullet{
    background: url(''bullet.png'') no-repeat;
    display:inline-block;
    vertical-align: middle;
    background-size:100%;
    height:25px;
    width:25px;
    margin-right: 5px;
}

¿Pero hay una forma automática de hacer lo mismo? Estaba pensando algo como:

h1{
    list-style-image: url(''bullet.png'');
}

pero eso solo parece funcionar con <ul> elementos. Realmente no quiero tener que pegar el elemento <span> todas partes antes del elemento <h1> . ¿Algunas ideas?

Answer 1

Algo como esto debería funcionar

h1, h2, h3 {
  background: url("the image link goes here") 0 center no-repeat;
  padding-left: 15px; /* change this to fit your needs */
}

Answer 2

Dé un nombre de clase al párrafo o cualquier elemento y aplique el siguiente código (le he dado el nombre de la clase como una bullet ):

.bullet::before {
content: '''';
position: absolute;
bottom: 7px;
left: -10px;
width: 3px;
height: 3px;
background-color: #000;
border-radius: 50%;
}

Answer 3

La forma muy sencilla de crear una viñeta utilizando el css anterior es utilizar la familia de fuentes ... de esta manera no es necesario incluir gráficos, etc.

Aquí está el código de clase:

.SomeClass:before {
  font-family: "Webdings";
   content: "=  ";

{

Answer 4

No, list-style list-style-image list-style list-style-image son solo para las etiquetas ul y ol . Tendrás que volver a tu primer método o hacer algo con js.

http://www.w3schools.com/css/css_list.asp http://www.w3schools.com/cssref/pr_list-style-type.asp

Answer 5

Podrías hacer algo como esto:

h1:before {
    content:"• ";
}

Ver violín:

http://jsfiddle.net/6kt8jhfo/6/

Answer 6

Puede usar el pseudo-selector :before para agregar cualquier cosa que desee antes de su etiqueta.

h1:before {
    content: "- "
}

<h1>My H1 text here</h1>

Answer 7

Si bien puede usar un :before pseudo-selector para agregar un carácter "-" o "•" delante de su elemento, realmente no hace que su elemento se comporte como un punto de bala. Tu elemento puede parecer un punto de bala, pero eso es solo un truco sucio, ¡y deberías evitarlo!

Para hacer que su elemento (1) se vea como un punto de bala y (2) se comporte como un punto de bala, debe configurar los atributos de display , list-style-type list-style-position de ese elemento.

CÓDIGO EJEMPLO

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>

EL FIDDLE

http://jsfiddle.net/L15a53cb/

Answer 8

Solo usa <p>&bull; </p> <p>&bull; </p> para crear un punto delante de tu palabra

Answer 9

list-style-type está reservado solo para ul . Puede usar <h1 class="bullet"> con pseudo-elemento :before .