Html - ::before clickable icon

canijusttravel
July 17, 2023
60 views
0 votes
2 Answers

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>

Answers

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>

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

The …. tag has to be outside the element code in order to make the element attached to the link you want to use

Please signup or login to give your own answer.

Click here to cancel reply.

Html – ::before clickable icon

Answers