Поместите значок в правой части этикетки с CSS

#accordion input { 
 
\t display: none; 
 
} 
 
#accordion label { 
 
\t background: #88C2E6; 
 
    color: white; 
 
\t cursor: pointer; 
 
\t display: block; 
 
\t margin-bottom: .125em; 
 
\t padding: .25em 1em; 
 
\t z-index: 20; 
 
    min-height: 40px; 
 
    line-height: 40px; 
 
} 
 
#accordion label:hover { 
 
\t opacity: 0.6; 
 
} 
 

 
#accordion label:after{ 
 
    content:url(http://image.noelshack.com/fichiers/2016/48/1480523700-arrow-dl.png); 
 
    background-position: right; 
 
} 
 

 
#accordion input:checked + label { 
 
\t background: #88C2E6; 
 
\t color: white; 
 
\t margin-bottom: 0; 
 
} 
 
#accordion article { 
 
\t background: white; 
 
\t height:0px; 
 
\t overflow:hidden; 
 
\t z-index:10; 
 
} 
 
#accordion article p { 
 
\t padding: 1em; 
 
} 
 
#accordion input:checked article { 
 
} 
 
#accordion input:checked ~ article { 
 
\t height: auto; 
 
\t margin-bottom: .125em; 
 
    border-left: solid 1px #88C2E6; 
 
    border-right: solid 1px #88C2E6; 
 
}

<div id="accordion"> 
 
    <div> 
 
     <input type="checkbox" id="check-1" /> 
 
     <label for="check-1">Some label</label> 
 
     <article> 
 
      <p>Some text</p> 
 
     </article> 
 
    </div> 
 
    </div>

Я аккордеон, который состоит из ввода с меткой и статьи, когда я нажимаю на ярлык, статья расширяется или втягивается , Я хотел бы добавить значок в правом конце метки.

Я попытался с помощью: после того, как, например:

#accordion label:after{ 
content:url(/img.png); 
}

Но затем значок помещается сразу после текста, как этот

Текст ИКОНЫ

И I Похоже, что это должно быть размещено справа, как это

Текст ----------------------------------------------- ----------------------- ICON

Когда я использую свойство background-position, оно остается на том же месте.

Как мне это сделать?

источник

2016-11-30 DevBob

элементов инлайн (например, SPAN, LABEL и т.д.) отображаются так, что их высота и ширина вычисляются браузером на основе их содержимого. Если вы хотите контролировать высоту и ширину, вы должны изменить блоки этих элементов. стиль ярлыка изменен на {display: block; width: 100%} – Arun

Добавлен сниппет! – DevBob

Один вариант, с которым вы могли бы пойти, устанавливает положение #accordion label в относительном и :after псевдоэлемент absolute. Затем присвойте ему значение right0 (или любое другое значение, которое вы хотите).

#accordion input { 
 
\t display: none; 
 
} 
 
#accordion label { 
 
\t background: #88C2E6; 
 
    color: white; 
 
\t cursor: pointer; 
 
\t display: block; 
 
    position: relative; 
 
\t margin-bottom: .125em; 
 
\t padding: .25em 1em; 
 
\t z-index: 20; 
 
    min-height: 40px; 
 
    line-height: 40px; 
 
} 
 
#accordion label:hover { 
 
\t opacity: 0.6; 
 
} 
 

 
#accordion label:after{ 
 
    content:url(http://image.noelshack.com/fichiers/2016/48/1480523700-arrow-dl.png); 
 
    position: absolute; 
 
    right: 0; 
 
} 
 

 
#accordion input:checked + label { 
 
\t background: #88C2E6; 
 
\t color: white; 
 
\t margin-bottom: 0; 
 
} 
 
#accordion article { 
 
\t background: white; 
 
\t height:0px; 
 
\t overflow:hidden; 
 
\t z-index:10; 
 
} 
 
#accordion article p { 
 
\t padding: 1em; 
 
} 
 
#accordion input:checked article { 
 
} 
 
#accordion input:checked ~ article { 
 
\t height: auto; 
 
\t margin-bottom: .125em; 
 
    border-left: solid 1px #88C2E6; 
 
    border-right: solid 1px #88C2E6; 
 
}

<div id="accordion"> 
 
    <div> 
 
     <input type="checkbox" id="check-1" /> 
 
     <label for="check-1">Some label</label> 
 
     <article> 
 
      <p>Some text</p> 
 
     </article> 
 
    </div> 
 
    </div>

источник

2016-11-30 16:40:56

Вы должны использовать position: absolute; на значок:

#accordion input { 
 
\t display: none; 
 
} 
 
#accordion label { 
 
\t background: #88C2E6; 
 
    color: white; 
 
\t cursor: pointer; 
 
\t display: block; 
 
\t margin-bottom: .125em; 
 
\t padding: .25em 1em; 
 
\t z-index: 20; 
 
    min-height: 40px; 
 
    line-height: 40px; 
 
    position: relative; 
 
} 
 
#accordion label:hover { 
 
\t opacity: 0.6; 
 
} 
 

 
#accordion label:after{ 
 
    content:url(http://image.noelshack.com/fichiers/2016/48/1480523700-arrow-dl.png); 
 
    position: absolute; 
 
    right: 15px; 
 
} 
 

 
#accordion input:checked + label { 
 
\t background: #88C2E6; 
 
\t color: white; 
 
\t margin-bottom: 0; 
 
} 
 
#accordion article { 
 
\t background: white; 
 
\t height:0px; 
 
\t overflow:hidden; 
 
\t z-index:10; 
 
} 
 
#accordion article p { 
 
\t padding: 1em; 
 
} 
 
#accordion input:checked article { 
 
} 
 
#accordion input:checked ~ article { 
 
\t height: auto; 
 
\t margin-bottom: .125em; 
 
    border-left: solid 1px #88C2E6; 
 
    border-right: solid 1px #88C2E6; 
 
}

<div id="accordion"> 
 
    <div> 
 
     <input type="checkbox" id="check-1" /> 
 
     <label for="check-1">Some label</label> 
 
     <article> 
 
      <p>Some text</p> 
 
     </article> 
 
    </div> 
 
    </div>

источник

2016-11-30 16:42:54 H4ris

Поместите значок в правой части этикетки с CSS

ответ

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