2

I wanted to know if there's a way to add content at the end of my div which is partially hidden.

.wrapper {
  overflow: hidden;
  width: 200px;
  height: 30px;
  margin-top: 10px;
}
.slide {
  position: absolute;
  left: -180px;
  width: 200px;
  height: 30px;
  transition: 1s;
  text-align: center;
}
.wrapper:hover .slide {
  transition: 1s;
  left: 0;
}
    <div class="wrapper">
    <p class="slide" style="background-color:red;">
        test
    </p>
</div>
<div class="wrapper">
    <p class="slide" style="background-color:blue;">
        test
    </p>
</div>
<div class="wrapper">
    <p class="slide" style="background-color:yellow;">
        test
    </p>
</div>
<div class="wrapper">
    <p class="slide" style="background-color:green;">
        test
    </p>
</div>

The thing is simple. It's a menu with 4 links. It's partially hidden, but on hover it's completely revealed. I wanted to add a little arrow on the visible part of the div. Is there a way to make it ? I already try this : 

.slide:after {
  content: '                 >';
}

Sure this works but I think there's a better way !

Nicolas Charvoz
  • 1,509
  • 15
  • 41

6 Answers6

3

Your ID attribute must be unique, document-wide. If ever you feel the need to give multiple elements the same ID, you should probably be using a class instead.

You can use a pseudo element to achieve what you're looking for. Tinker with the numbers to get your desired 'arrow'. This uses the border triangle technique.

.wrapper {
    overflow: hidden;
    width: 200px;
    height: 30px;
    margin-top: 10px;
}
.slide {
    position: absolute;
    left: -180px;
    width: 200px;
    height: 30px;
    transition: 1s;
    text-align: center;
}
.wrapper:hover .slide {
    transition: 1s;
    left: 0;
}
.slide:after {
    position: absolute;
    border:6px solid transparent; /* Half the height of arrow */
    border-left:10px solid #fff; /* Width of arrow */
    border-right:0;
    top:8px; /* Arrow distance from top */
    right:2px; /* Arrow distance from right */
    content:'';
    display:block;
}
<div class="wrapper">
    <p class="slide" style="background-color:red;">test</p>
</div>
<div class="wrapper">
    <p class="slide" style="background-color:blue;">test</p>
</div>
<div class="wrapper">
    <p class="slide" style="background-color:yellow;">test</p>
</div>
<div class="wrapper">
    <p class="slide" style="background-color:green;">test</p>
</div>

Related:

Community
  • 1
  • 1
George
  • 36,413
  • 9
  • 66
  • 103
1

You were on the right lines I think, just adding an absolute to the :after content does the trick:

.wrapper {
  overflow: hidden;
  width: 200px;
  height: 30px;
  margin-top: 10px;

}
.slide:after {
  content: ">";
  position: absolute;
  top: 0;
  right:0;
}
.slide {
  position: absolute;
  left: -180px;
  width: 200px;
  height: 30px;
  transition: 1s;
  text-align: center;
}
.wrapper:hover .slide {
  transition: 1s;
  left: 0;
}
<div class="wrapper">
  <p class="slide" style="background-color:red;">
    test
  </p>
</div>
<div class="wrapper">
  <p class="slide" style="background-color:blue;">
    test
  </p>
</div>
<div class="wrapper">
  <p class="slide" style="background-color:yellow;">
    test
  </p>
</div>
<div class="wrapper">
  <p class="slide" style="background-color:green;">
    test
  </p>
</div>

If you want the arrow to disappear on hover, you can use:

.slide:hover:after {
  content: "";
}
dav_i
  • 27,509
  • 17
  • 104
  • 136
1

You could use an alternate implementation of the ::after pseudo-element, using it to create a 'border-triangle' shape, and positioning it absolute (the advantage of the 'border-triangle' over the use of the > is simply that it has a rather higher visibility):

.slide::after {
  content: '';
  width: 0;
  height: 0;
  border: 0.5em solid transparent;
  border-left-color: rgba(0,0,0,0.8);
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -0.5em;
  opacity: 1;
  transition: all 0.4s linear;
}

.slide:hover::after {
  opacity: 0.3;
}


.wrapper {
  overflow: hidden;
  width: 200px;
  height: 30px;
  margin-top: 10px;
}
.slide {
  position: absolute;
  left: -180px;
  width: 200px;
  height: 30px;
  transition: 1s;
  text-align: center;
}
.slide::after {
  content: '';
  width: 0;
  height: 0;
  border: 0.5em solid transparent;
  border-left-color: rgba(0,0,0,0.8);
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -0.5em;
  opacity: 1;
  transition: all 0.4s linear;
}

.slide:hover::after {
  opacity: 0.3;
}
.wrapper:hover .slide {
  transition: 1s;
  left: 0;
}
<div class="wrapper">
  <p class="slide" style="background-color:red;">
    test
  </p>
</div>
<div class="wrapper">
  <p class="slide" style="background-color:blue;">
    test
  </p>
</div>
<div class="wrapper">
  <p class="slide" style="background-color:yellow;">
    test
  </p>
</div>
<div class="wrapper">
  <p class="slide" style="background-color:green;">
    test
  </p>
</div>

Note also that, while you've changed your posted code in the question, the use of a duplicate id immmediately invalidates your HTML; which is why I've used classes instead (as did you, in the edit to your question).

David Thomas
  • 249,100
  • 51
  • 377
  • 410
0

change ids for class like this:

<div class="wrapper">
    <p class="slide" style="background-color:red;">
        test
        <span>></span>
    </p>
</div>
<div class="wrapper">
    <p class="slide" style="background-color:blue;">
        test
        <span>></span>
    </p>
</div>
<div class="wrapper">
    <p class="slide" style="background-color:yellow;">
        test
        <span>></span>
    </p>
</div>
<div class="wrapper">
    <p class="slide" style="background-color:green;">
        test
        <span>></span>
    </p>
</div>

and css:

.wrapper {
    overflow: hidden;
    width: 200px;
    height: 30px; 
    margin-top: 10px;
}
.slide {
    position: absolute;
    left: -180px;
    width: 200px;
    height: 30px;
    transition: 1s;
    text-align: center;
}
.slide span {
    float:right;
    font-weight: bold;
    margin: 5px 5px 0px 0px;
}

.wrapper:hover .slide {
    transition: 1s;
    left: 0;
}

http://jsfiddle.net/tsoz57mt/4/

Jon Ander
  • 740
  • 1
  • 14
  • 23
0
<div class="wrapper">
    <p id="slide" style=" background-color:red;">
        <span>test</span> 
        <span class='arrow'>></span>
    </p>
</div>
<div class="wrapper">
    <p id="slide" style="background-color:blue;">
        <span>test</span> 
        <span class='arrow'>></span>
    </p>
</div>
<div class="wrapper">
    <p id="slide" style="background-color:yellow;">
        <span>test</span> 
        <span class='arrow'>></span>
    </p>

</div>
<div class="wrapper">
    <p id="slide" style="background-color:green;">
        <span>test</span> 
        <span class='arrow'>></span>
    </p>
</div>

CSS----------------

.wrapper {
overflow: hidden;
width: 200px;
height: 30px; 
margin-top: 10px;
 }
.arrow{
float: right;
}
#slide {
position: absolute;
left: -180px;
width: 200px;
height: 30px;
transition: 1s;
text-align: center;
}
.wrapper:hover #slide {
transition: 1s;
left: 0;
}
Vinay Sharma
  • 360
  • 3
  • 16
0

you could add a border-image to your slide. (please use class=slide instead of id=slide and change # to . in your css as mentioned)

.slide { 
 background-image: url('arrow.jpg');
 background-position: right;
 background-repeat: no-repeat;
 display: block; /* make the link background clickable */
}
cari
  • 2,251
  • 2
  • 18
  • 27