Html ：：可点击图标之前

:root {
    --secondary-color: #4b4945;
    --light-text-color: #fafafa;
    --dark-text-color: #37332f;
    --norm-text-color: #4b4945;
    --bg-med: #efefef;
    --primary-color: #492365;
    --primary-header: #492365;
    --solid-button-text: #fafafa;
    --solid-button-text-hover: #120919;
    --hollow-button-text: #120919;
    --primary-lighter-1: #5b3974;
    --primary-lighter-2: #6a4b81;
    --primary-lighter-3: #a491b2;
    --primary-lighter-4: #d2c8d9;
    --primary-lighter-5: #e4dee8;
    --primary-lighter-6: #ede9f0;
    --primary-darker-1: #42205b;
    --primary-darker-2: #371a4c;
    --primary-darker-3: #251233;
    --primary-darker-4: #120919;
    --hover-shadow: 0px 0px 5px 0px #492365;
    --border-color: #492365;
    --banner-overlay: rgba(73, 35, 101, 0.65);
    --inset-shadow: none;
    --outset-shadow: none;
    --flat-border: 2px solid;
}

.container {
    max-width: 80rem;
    padding: 1rem;
    margin: 0 auto;
    position: relative;
    width: 100%;
}

.card {
    border: 2px solid;
    border-color: #492365;
    background-color: #492365;
    box-shadow: none;
    border: var(--flat-border);
    border-color: var(--border-color);
    box-shadow: var(--outset-shadow);
    background-color: var(--primary-color);
    display: flex;
    position: relative;
    flex-flow: column nowrap;
    margin: 0;
}

.card>p:last-of-type {
    margin-bottom: 1rem;
}

.card>p:last-of-type.card__title {
    margin: 0;
}

.card__image {
    background-color: #fefefe;
}

.card__image>img {
    width: 100%;
}

.card__image.--icon {
    background-color: #492365;
    background-color: var(--primary-color);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.card__content {
    flex-grow: 1;
    padding: 0.5rem 1rem;
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    background-color: #fefefe;
    word-break: break-word;
}

.card__content>div {
    flex-grow: 1;
}

.card__content>p:last-child {
    margin-bottom: 0;
}

.card__title {
    background-color: #492365 !important;
    color: #fafafa !important;
    padding: 0.5rem 1rem !important;
    background-color: var(--primary-color) !important;
    color: var(--solid-button-text) !important;
    margin: 0 !important;
}

.card__buttons {
    background: #fefefe;
    padding: 0.5rem 1rem;
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.card__buttons>.button {
    margin: 0 0.25rem;
}

.card.--linked>a {
    text-decoration: none;
    color: inherit;
    height: 100%;
    display: flex;
    position: relative;
    flex-flow: column nowrap;
}

.card.--linked:hover,
.card.--linked:focus-within {
    transition: transform 0.05s ease-in-out;
    transform: scale(1.01, 1.01);
    box-shadow: 0px 0px 5px 0px rgba(73, 35, 101, 0.9);
    box-shadow: var(--hover-shadow);
}

@media only screen and (hover: none) {
    .card.--linked::before {
        content: "\1F517";
        background-color: #492365;
        color: #fafafa;
        font-family: "foundation-icons";
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        background-color: var(--primary-color);
        color: var(--solid-button-text);
        position: absolute;
        padding: 0.2rem 0.5rem;
        opacity: 0.9;
        text-align: center;
        top: 0;
        right: 0;
        margin-left: -5rem;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 10px;
        z-index: 1;
    }
}

@media only screen and (min-width: 0em) {
    .card.--linked::before {
        content: "\1F517";
        background-color: #492365;
        color: #fafafa;
        font-family: "foundation-icons";
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        background-color: var(--primary-color);
        color: var(--solid-button-text);
        position: absolute;
        padding: 0.2rem 0.5rem;
        opacity: 0.9;
        text-align: center;
        top: 0;
        right: 0;
        margin-left: -5rem;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 10px;
        z-index: 1;
    }
}

.card.--linked { text-decoration:none; }
.card.--linked::before {
    content: attr(data-pseudo-text);
    background-color: red;
}

@mmedia only screen and (min-width: 64em) {
    .card.--linked.--pseudo-none::before {
        display: none;
    }
}

<div class="container">
  <div>
    <a href="https://stackoverflow.com/" class="card --linked" data-pseudo-text="this is your pseudo text">
      <h2 class="card__title">title</h2>
      <div class="card__content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque quasi aut deleniti, nisi quo cum, repellendus eius sint consectetur exercitationem aliquid eveniet, eligendi natus neque distinctio omnis consequatur a hic?</p>
      </div>
    </a>
  </div>
</div>