Как уменьшить ширину блока ссылки?

Question

[Qeinzo]

Есть список вида:

<li>
    <a href="ya.ru">
	      <div class="simple">Яндекс</div>
    </a>
</li>

Ширина элемента div составляет 200px. Ссылка, соответственно, тоже 200px, поэтому пустое пространство после слово "Яндекс" является кликабельным. Я хочу, чтобы размер этого пространства уменьшился хотя бы до 150px.

Если задать ширину элементу div, то ничего не меняется - ссылка по-прежнему имеет ширину 200px.

P.S. У элемента div справа находится иконка (background), которая тоже является кликабельной.

Comments

[wonderingpeanut]

сделай div'у display: inline-block

[Qeinzo]

wonderingpeanut, пробовал. В такой ситуации пропадает иконка (background), которая находится справа.

[AntVlad]

Qeinzo, а какой смысл в блоке div в ссылке?

[Danny Arty]

код в песочницу, дабы не гадать какие у вас там стили. Лично не понимаю, зачем давать ширину 200px, если остается пустое пространство? Почему бы не сделать просто display: inline-block?

[Qeinzo]

AntVlad, потому что я, как рукожоп, только так смог реализовать наличие иконки справа от ссылки. Если не использовать div, то ширина ограничивается размером тега "a", и тогда иконку невозможно разместить справа (ширина блока ограничена шириной символов - за пределы выйти не получится).

Danny Arty, https://codesandbox.io/s/html-css-forked-218yno?fi...
Если использовать inline-block, то иконки пропадут.

[Qeinzo]

В общем, пока использовал тупое (как мне кажется) решение вопроса: у элемента "li" прописал padding-right 50px.

Answer 1

[Danny Arty]

Это как пример, дальше под ваши задачи измените данные

.simple {
        display: inline-block;        
}
.simple:after {        
        content: '';
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-left: 30px;
        background-image: url("https://cdn1.savepice.ru/uploads/2022/4/16/edcafd0e519812c52d181453d55029dd-full.png");
        background-repeat: no-repeat;
        background-size: contain;  
}
.simple:hover:after {
        background-image: url("https://cdn1.savepice.ru/uploads/2022/4/16/b65792e10f9241773936ac68751ba911-full.png");
}