Стилизация в зависимости от ссылки

Question

Не могу понять как сделать ссылки как на скришоте не меняя html кода и используя только CSS, помогите пожалуйста

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bLink182</title>
    <meta name="description" content="t15. bLink182">
    <link rel="stylesheet"href="style.css">
</head>
<body>
    <h1>Links</h1>
    <ul><li><a href="https://developer.mozilla.org/">developer.mozilla.org</a></li>
        <li><a href="https://validator.w3.org/">validator.w3.org</a></li>
        <li><a href="https://www.freecodecamp.org/"target="_blank">freecodecamp.org</a></li>
        <li><a href="https://ucode.world/">ucode.world</a></li>
        <li><a href="https://schema.org/a"target="_blank">schema.org</a></li>
        <li><a href="https://www.sitemaps.org/">sitemaps.org</a></li>
        <li><a href="http://nginx.org/">nginx.org</a></li>
        <li><a href="https://prometheus.org.ua">prometheus.org.ua</a></li>
        <li><a href="http://test.www.link/">test.www.link</a></li>
    </ul>
</body>
</html>

Answer 1

Используй селектор по атрибутам (только добавь внутрь соответствующие стили):

a::before {}
a[href^="http:"]::before {}
a[target="_blank"]::after {}
a[href$="a"]::after {}

Зелёные, если я правильно понял, это

:visited {}

Answer 2

li.arrow-right{
  position:relative;
  display:inline-block;
}
li.arrow-right::before{
  content:'\21D2';
  position:absolute;
  right:-18px;
  top:0px;
  color:green;
}

<h1>Links</h1>
        <ul><li class="arrow-right"><a href="https://developer.mozilla.org/">developer.mozilla.org</a></li>
            <li><a href="https://validator.w3.org/">validator.w3.org</a></li>
            <li><a href="https://www.freecodecamp.org/"target="_blank">freecodecamp.org</a></li>
            <li><a href="https://ucode.world/">ucode.world</a></li>
            <li class="arrow-right"><a href="https://schema.org/a"target="_blank">schema.org</a></li>
            <li><a href="https://www.sitemaps.org/">sitemaps.org</a></li>
            <li><a href="http://nginx.org/">nginx.org</a></li>
            <li class="arrow-right"><a href="https://prometheus.org.ua">prometheus.org.ua</a></li>
            <li><a href="http://test.www.link/">test.www.link</a></li>
        </ul>

или

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bLink182</title>
    <meta name="description" content="t15. bLink182">
    <link rel="stylesheet"href="style.css">
</head>
<body>
    <h1>Links</h1>
    <ul><li><a href="https://developer.mozilla.org/">developer.mozilla.org</a></li>
        <li><a href="https://validator.w3.org/">validator.w3.org</a></li>
        <li><a href="https://www.freecodecamp.org/"target="_blank">freecodecamp.org</a>&#8658;</li>
        <li><a href="https://ucode.world/">ucode.world</a></li>
        <li><a href="https://schema.org/a"target="_blank">schema.org</a></li>
        <li><a href="https://www.sitemaps.org/">sitemaps.org</a>&#8658;</li>
        <li><a href="http://nginx.org/">nginx.org</a></li>
        <li><a href="https://prometheus.org.ua">prometheus.org.ua</a></li>
        <li><a href="http://test.www.link/">test.www.link</a></li>
    </ul>
</body>
</html>

а так ищите unicode в таблице там есть решение + так як написал Qwertiy

:visited

БЛОГ НА HUSL

Стилизация в зависимости от ссылки

Ответы (2 шт):