Разные цвета границ в одном классе * CSS *

Question

У меня есть эти подчеркивающие элементы (border-bottom), которые оживляют и подчеркивают весь текст «Read More ...» при наведении курсора.

Все они работают так, как задумано, но я бы очень хотел, чтобы они были разных цветов (каждая строка будет использовать образец цвета от логотипа доего слева).

Все эти элементы принадлежат одному классу

    .projectDetails a{
    text-decoration: none;
    position: relative;
    font-family: 'Palanquin', sans-serif;
    color: black;
    font-weight: bold;
    font-size: 1.1em;
    letter-spacing: .03em;
    line-height: 1.7em; 
    padding-left: .1em;
    }


    .projectDetails a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: .09em;
    top: 2em;
    border-bottom: .1em solid #A49285;
    width: 20%;
    transition: 0.3s;
    }

    .projectDetails a:hover:after {
    width: 100%;
    }

Мне интересно, можно ли редактировать один атрибут в этом классе (цвет границы снизу), чтобы он мог иметь разные цветадля каждого проекта в моем портфолио?

Спасибо!

Редактировать: Пример блока HTML

    <div class='projectHolder'>
            <div class="workImageContainer">
                <img src="../images/twitchLogo.png" alt='Twitch Logo' >
            </div>

            <div class="projectDetails" id="project2">
                <h1 id="snapPoint2">
                    Twitch Redesign
                </h1>

                <h4>
                    Rochester, NY Fall 2017
                </h4>

                <p>
                    Redesigned layout and branding for the landing page 
                    of 
                    a videogame livestreaming website through user and 
                    market research. 
                </p>

                <a class="inTextLink" id="expand2" href="#">Read 
                  More...</a> 
            </div>
    </div>

Answer 1

Вы также можете создать основной класс, а затем добавить дополнительный класс для каждого цвета.Это очень похоже на ответ Д. Кендалла выше, за исключением того, что он просто настраивает цвет, и это все, что вы просили изменить.Примерно так:

.projectDetails {
    YOUR BASE STYLE
}

.prjectDetails.meet {
    border-color: #COLOR;
}

.projectDetails.twitch {
    border-color: #COLOR;  
}

Это немного проще, чем ответ выше, и выполняет свою работу.

Answer 2

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

.projectDetails a{
    text-decoration: none;
    position: relative;
    font-family: 'Palanquin', sans-serif;
    color: black;
    font-weight: bold;
    font-size: 1.1em;
    letter-spacing: .03em;
    line-height: 1.7em; 
    padding-left: .1em;
    }


    .projectDetails a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: .09em;
    top: 2em;
    border-bottom-width: 0.2em ;
    border-bottom-style:solid;
    width: 20%;
    transition: 0.3s;
    }

    .projectDetails a:hover:after {
    width: 100%;
    }
    .color1:after{content: '';border-bottom-color:#A49285;}
    .color2:after{content: '';border-bottom-color:red;}
    .color3:after{content: '';border-bottom-color:green;}
    .color4:after{content: '';border-bottom-color:blue;}

<div class="projectDetails">
  <a class="color1">Color 1</a>
  <a class="color2">Color 2</a>
  <a class="color3">Color 3</a>
  <a class="color4">Color 4</a>
</div>

.

Answer 3

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

.projectDetails.meetTeam {
 border-bottom: .1em solid #{selected color};
}
.projectDetails.redesignTwitch {
 border-bottom: .1em solid #{selected color};
}

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

Основной код для изменения CSS в Javascript, если вы хотитеиспользуйте это:

document.getElementByClassName('projectDetails meetTeam').style.border-bottom = '.1em solid #{selected color};';