Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

::before clickable icon

byMR
July 17, 2023

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 :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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::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>
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading