CSS Animated Side-button-tag - html

Question

There is a tag trigger on the right side of each line.
Some of those tags may contain messages. Initially only an indicator icon
is shown and the message is hidden. (I draw the overflow
for demonstration, but there may be other methods) When the shown icon
is hovered, the whole tag would move to the left and showing the
message with a button.
Now here is the problem. Firstly I cannot animate the tag with scalable message length in pure CSS. Secondly since I'm using fixed height for each line, I cannot set the right property for vertical alignment for the message text.
Here is my attempt http://codepen.io/rix/pen/DaGyk.

Answer 1

1. To align the left edge of the message to the right edge of the row regardless of the message length: first position the message absolutely with a right: 50px (since you'd want the left icon to show), then apply a transform: translateX(100%):
.card-item .control {
position: absolute;
right: 50px;
transform: translateX(100%);
/* other styles... */
}
2. To animate the message on hover: you need to define a transition on .control, then simply transform: translateX(0) on :hover. Also, set right: 0 so that the right edge of the message is flush with the right edge of the row.
.card-item .control {
position: absolute;
right: 50px;
transform: translateX(100%);
transition: all 0.3s;
/* other styles... */
}
.card-item .control:hover {
right: 0;
transform: translateX(0);
}
3. To vertically align the message text: since you have a fixed height for the message, set the line-height of the message text to the row height which is 50px, and vertical-align: top:
.card-item .control .message {
/* remove this: margin-top: -8px; */
line-height: 50px;
vertical-align: top;
}
http://codepen.io/myajouri/full/jCBiH

Answer 2

In this example I have the pop-over-part under the card popping out to the right. Changing the right: -10 to 10 and changing background-position: to top left should help you out. You can play around with it.
Keep each line as a li and you can give your li a class:
li {
text-align: -webkit-match-parent;
line-height: 20px;
}
.pop-over-part {
position: absolute;
right: -10px;
top: 6px;
height: 100%;
width: 10px;
display: inline-block;
background-image: url(/assets/icons/tab-x.png);
background-repeat: no-repeat;
background-position: top right;
cursor: pointer;
}