::before clickable icon

I'm trying to make the link icon in my code clickable so that the user can click anywhere in the card to go to another page. I've tried (" attr(href) ") but that added the URL text next to the icon which I don't want. Is this something that is possible? Other posts I've read mentioned it was a bug. Is that still the case?

: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[data-pseudo-text]::before {
    content: attr(data-pseudo-text);
}

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

<div class="container">
  <div class="card --linked">
    <a href="https://stackoverflow.com/">
      <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>

Solution

It will work if you assign the classes card --linked to the <a> element (one level deeper):

<div class="container">
  <div>
    <a href="https://stackoverflow.com/" class="card --linked" data-pseudo-text="link">
      <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>

And, of course, it would help if you also defined the data-pseudo-text attribute in the same <a> element:

: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>