Links inside :after CSS

[Left]

I have been struggling to figure out how to and a link on a rotating block menu. Nothing I seem to do creates the desired effect.... HELP! I'm pulling my hair out on this one.

I want to make the content Labels links.

CSS:

*,*:before,*:after {
    box-sizing: border-box;
}

:after {
    content: "";
    link: "";
}
nav {
      float: left;
    position: relative;
    top: 13px;
     left: -13px;
    background: transparent;
}
nav ul {
    text-align: center;
}
nav ul li {
    position: relative;
     width: 69px;
     cursor: pointer;
    background: crimson;
    color: white;
    text-transform: uppercase;
    transition:all .5s ease-out;
}
nav ul li:after {
    position: absolute;
    background: black;
    color: crimson;
    top:0;
    left: 70px;
    width: 70px; height: 100%;
      opacity:.5;
      transform: perspective(400px) rotateY(90deg);
    transform-origin: 0 100%;
    transition:all .5s ease-out;
}
nav ul li:nth-child(1):after {
    content: "BIO";
    line-height: 69px;
}
nav ul li:nth-child(2):after {
    content: "DISC"; 
    line-height: 69px;
}
nav ul li:nth-child(3):after {
    content: "VIDEO";
    line-height: 69px;
}
nav ul li:nth-child(4):after {
    content: "SHOWS";
    line-height: 69px;
}
nav ul li:hover {
    transform: translateX(-69px);
}
nav ul li:hover:after {
      opacity: 1;
    transform: perspective(400px) rotateY(0deg) scale(1) ;
}
nav ul li > div {
    display: inline-block;
    padding: 24px 0;
    background: transparent;
}
nav ul li div { 
    position: relative; 
}
 

MENU HTML:

<section id="menu">
    <nav class="navbar-fixed-top">
            <ul>
                <li>
                    <div style="font-size: 1.25rem;" class="icon-notebook"></div>
                </li>
                <li>
                  <div style="font-size: 1rem;" class="socicon socicon-play"></div>
                </li>
                <li>
                  <div style="font-size: 1.25rem;" class="etl-icon icon-video"></div>
                </li>
                <li>
                  <div style="font-size: 1.25rem;" class="icon-global"><div class="nav ul li"></div>
                </li>
          </ul>
    </nav>
</section>

[Ingolme]

There is no CSS "link" property. If you want a link you must use the <a> tag in HTML.

You should not be using CSS to add content to the page, CSS is only for changing the appearance of the content. Put the text and links in the HTML.

[Left]

I have the CSS link property, just didn't copy it here. 

Yes I thought of that and tried that, but that results in the icon and the label being on the same side of the cube. Then when you hover over the link is no longer shown.

The idea here is for the front of the cube to have the icon, and the side to have the linked label.

 

[Left]

 

[Ingolme]

What I was saying is that there is no such thing as a "link" property in CSS.

Change your structure to be like this:

<li>
  <a href="#">
    <div style="font-size: 1.25rem;" class="icon-notebook"></div>
    <span class="label">BIO</span>
  </a>
</li>

Then change the selectors, replacing references to nav ul li with nav ul li a and replacing nav ul li:after with nav ul li .label. Be sure to set the display of the <a> element to "block"

[Left]

Thank you, Now I get what you were saying. However I am not familiar with setting <a> to "block" Where is this done?

[Ingolme]

The <a> element is by default an inline element, you need it to be a block to be styled correctly. Read about inline and block elements here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes

[Left]

Ok, I tried adding a "block" value in CSS like this: a {display: block;}

Also tried inserting it into like this:

nav ul li a {
    display: block;
    position: relative;
     width: 69px;
     cursor: pointer;
    background: crimson;
    color: white;
    text-transform: uppercase;
    transition:all .5s ease-out;
}

 

also:

.block {display: block;}

Edited January 10, 2018 by Left

[Left]

So my code now looks like this and the lay-out is completely messed up....

*,*:before,*:after {
    box-sizing: border-box;
}

}
nav {
    float: left;
    position: relative;
    top: 13px;
     left: -13px;
    background: transparent;
}
nav ul {
    text-align: center;
}
nav ul li a {
    display: block;
    position: relative;
     width: 69px;
     cursor: pointer;
    background: crimson;
    color: white;
    text-transform: uppercase;
    transition:all .5s ease-out;
}
nav ul li.label {
    position: absolute;
    background: black;
    color: crimson;
    top:0;
    left: 70px;
    width: 70px; height: 100%;
      opacity:.5;
      transform: perspective(400px) rotateY(90deg);
    transform-origin: 0 100%;
    transition:all .5s ease-out;
}
nav ul li:nth-child(1):after {
    content: "BIO";
    line-height: 69px;
}
nav ul li:nth-child(2):after {
    content: "DISC"; 
    line-height: 69px;
}
nav ul li:nth-child(3):after {
    content: "VIDEO";
    line-height: 69px;
}
nav ul li:nth-child(4):after {
    content: "SHOWS";
    line-height: 69px;
}
nav ul li:hover {
    transform: translateX(-69px);
}
nav ul li:hover:after {
      opacity: 1;
    transform: perspective(400px) rotateY(0deg) scale(1) ;
}
nav ul li > div {
    display: inline-block;
    padding: 24px 0;
    background: transparent;
}
nav ul li div { 
    position: relative; 
}

 

html:

<section id="menu">
    <nav class="navbar-fixed-top">
        <ul>
            <li>
                <a class="block" href="bio.html">
                    <div style="font-size: 1.25rem;" class="icon-notebook"></div>
                    <span class="label">BIO</span>
                </a>
            </li>
                <li>
                <a class="block" href="disc.html">
                  <div style="font-size: 1rem;" class="socicon socicon-play"></div>
                  <span class="label">DISC</span>
                  </a>
                </li>
                <li>
                <a class="block" href="video.html">
                  <div style="font-size: 1.25rem;" class="etl-icon icon-video"></div>
                  <span class="label">Video</span>
                </a>
                </li>
                <li>
                <a class="block" href="past.html">
                  <div style="font-size: 1.25rem;" class="icon-global"></div>
                  <span class="label">Shows</span>
                </a>
                </li>
          </ul>
    </nav>
</section>

[Ingolme]

These rules need to be removed:

nav ul li:nth-child(1):after {
    content: "BIO";
    line-height: 69px;
}
nav ul li:nth-child(2):after {
    content: "DISC"; 
    line-height: 69px;
}
nav ul li:nth-child(3):after {
    content: "VIDEO";
    line-height: 69px;
}
nav ul li:nth-child(4):after {
    content: "SHOWS";
    line-height: 69px;
}

There should be a space between "li" and ".label" here:

nav ul li.label {
    position: absolute;
    background: black;
    color: crimson;
    top:0;
    left: 70px;
    width: 70px; height: 100%;
      opacity:.5;
      transform: perspective(400px) rotateY(90deg);
    transform-origin: 0 100%;
    transition:all .5s ease-out;
}

These selectors need to be changed to take the new <a> element into account:

nav ul li:hover {
    transform: translateX(-69px);
}
nav ul li:hover:after {
      opacity: 1;
    transform: perspective(400px) rotateY(0deg) scale(1) ;
}
nav ul li > div {
    display: inline-block;
    padding: 24px 0;
    background: transparent;
}

Do you understand the concept of what is trying to be done here? The structure we're working with is very simple: One <a> element, with a <div> and a <span> as children. The list surrounding it is not important.

[Left]

I am new to CSS but I do think I am following. Thank you for your time a patients.

So including the <a> element would look like this:

nav ul li a:hover {
    transform: translateX(-69px);
}
nav ul li a:hover:after {
      opacity: 1;
    transform: perspective(400px) rotateY(0deg) scale(1) ;
}
nav ul li a > div {
    display: inline-block;
    padding: 24px 0;
    background: transparent;
}

 

[Ingolme]

The :after pseudo-element has been replaced with the <span> element, so you will not need it anymore. Put all the properties from your :after selector on the .label element instead.

This is more advanced CSS, if you're new to CSS you probably should get more familiar with regular CSS before moving on to things like this.

[dsonesuk]

To have the content: property work as a link it has to be placed within anchor link, most :hover :after should be transferred to this anchor element from li element

see https://codepen.io/anon/pen/RxyPJE

[Left]

@dsonesuk Thank you for the code sample, that really help me get to where I wanted to go!