Jump to content
Left

Links inside :after CSS

Recommended Posts

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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"

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Left

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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;
}

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×