Как убрать текст, но картинку оставить?

Question

[Dmitriy]

HTML код нельзя менять

<div class="text">
        <img class="ui languages__flag image" src="./img/russia.svg">
        ru
</div>

Надо чтобы там осталась только картинка, а у текста как будто был display: none, вообщем не мешал и его не было
Пытался прописать fozt-size: 0, но и картинка пропадает

Comments

[apoca1ipsis]

Может тогда добавить для img display: block;?

.text {
font-size: 0;
}

.text img {
display: block;
width: 100%
}

Answer 1

[Ankhena]

Пытался прописать fozt-size: 0, но и картинка пропадает

С чего бы это? https://jsfiddle.net/qLjr9f7w/ (Либо у вас просто опечатка. Используйте хороший редактор с подсветкой кода, он будет показывать ошибки)

Но font-size: 0 не является доступным скрытием.

Лучший вариант:
Картинка в данном случае не контентная и значит, её не должно быть в разметке.
Сделайте её псевдоэлементом.
Текст оберните в span с классом visually-hidden и доступно скройте. Легко гуглится по запросам типа "visually-hidden css" или "паттерн visually-hidden".

Вариант похуже:
Оставить картинку в коде, но добавить атрибут aria-hidden="true"

Comments

[Dmitriy]

говорю я не могу поменять html, так как я использую плагин

[Ankhena]

Dmitriy, используйте хороший плагин, а не говнокодерский ;)

Но font-size 0 скроет ваш текст. Плохо, но скроет.

[Dmitriy]

Ankhena, всё, спасибо! Я разобрался, оказывается у картинки стояло свойство max-height

[Dmitriy]

Dmitriy,@Ankhena, и font-size заработал

[Ankhena]

Dmitriy, вы зря сняли кураторскую отметку решением.

Дело в том, что ваш вопрос нужен не только вам. Но и тем, кто может менять разметку. И было бы хорошо, если бы они воспользовались правильным способом решения.

[Dmitriy]

Ankhena, сори не заметил

Answer 2

[Александр]

.text {
  color: rgba(0,0,0,0)
}