отрегулируйте ширину заголовка с помощью значка в начальном гармошке - PullRequest
Новая
       22

отрегулируйте ширину заголовка с помощью значка в начальном гармошке

0 голосов
/ 04 июня 2019

Когда название аккордеона в Bootstrap очень длинное, оно очень близко подходит к значку справа.Я хотел бы добавить пробел между значком и заголовком.

Это код CSS: 

.card-header a {
padding: 15px 20px;
display: block;
position: relative;
color: #5d5d5d;
}

.card-body {
 color: #777;
 font-family: 'Raleway', sans-serif;
 line-height: 26px;
}

.card-header a:hover {
 background-color: #ff4d1c;
 color: #fff;
 border-radius: 2px;
 text-decoration: none;
 }

.card-header.active a {
 color: #ff4d1c;
}

.card-header.active a:hover {
 color: #fff;
}

.card-header.active a:after {
 content: '\ef9a';
 color: #ff4d1c;
}

.card-header a:after {
 content: '\efc2';
 font-family: 'IcoFont';
 font-size: 14px;
 position: absolute;
 right: 15px;
 top: 16px;
 color: #ff4d1c;
}

.card-header.active a:hover:after,
.card-header a:hover:after {
 color: #fff
}

И это HTML: 

<div class="card-header" role="tab" id="faq1"><a data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">here comes the long text</a></div>

Я добавил padding и margin в a: after, но это не сработало.Что я должен добавить, чтобы, когда текст приближался к значку справа, он продолжался на следующей строке?

...