Data-content text styling and positioning

Question

I have a div with data-content in it that is used for hover effect. It looks like this:

HTML:

<div data-content="TEXT THAT NEEDS TO BE POSITIONED" class="teamleft">
</div>

Thanks to stackoverflow I found neat css code that uses :after and :hover:after to make hover effect possible. The only thing I can't figure out is positioning and styling the data-content text. I want to vertically center my text. Also, how do I add differently styled text in one data-content? Or maybe I should use two different data-contents?

CSS:

teamleft
{
position: absolute;
width:50%;
height: 100%;
background-color: #25335a;
}
.teamleft:after
{
position: absolute;
width: 100%;
height: 100%;
content: attr(data-content);
color:#fff;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.teamleft:hover:after
{
opacity:1;
}

Thanks in advance!

JSFiddle: https://jsfiddle.net/e8t2gcxg/3/

The positioning and styling is handled right there in the `.teamleft:after` selector. Just add the relevant CSS properties. Otherwise, it might help if you explain what part of styling and/or positioning you're having troubles with. — Christian, Aug 02 '15 at 02:21
It seems like .teamleft:after selector is for the hover block. The position of text that is inside of data-content doesn't change, except for text-align style. I am confused, sorry. — Barney Stinson, Aug 02 '15 at 02:35
You have to explain **exactly** what it is that you're trying to do. You can't target the text independently of the `:after` pseudoelement, but you can control padding, line-height etc. Depending on what you want to do, it might or might not be possible with your current setup - but because we don't actually know what you want to do, it's impossible to say. — Christian, Aug 02 '15 at 03:03
ok, thanks for posting that in comment, but please post in question too. It will make more people see it. — www139, Aug 02 '15 at 03:39
@BarneyStinson do you know to accept an answer? You can only accept one. Click the check mark that appears when you hover beside the answer of your choice. You will gain a badge and 2 points. The person who answered gets 15. So get answering!!! :) — Rachel Gallen, Aug 02 '15 at 16:42

score 1 · Answer 1 · edited May 23 '17 at 11:43

1

Try this code:

.teamLeft:after {
position: absolute;
width: 100%;
height: 20px;
top:calc(50% - 10px);
content: attr(data-content);
text-align:center;
color:#fff;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}

Change the height of the :after to 20px; then use top and change it to 50% of parent div height -10px (half the height of the :after). Apply text-align:center; to center the text horizontally.

edit

See this link; it should help.

http://phrogz.net/css/vertical-align/index.html

Link found from: https://stackoverflow.com/a/2744005/3011082

edited May 23 '17 at 11:43

Community

1
1

answered Aug 02 '15 at 03:46

www139

4,960
3
31
56

It does center text, but I need a 100% height div – Barney Stinson Aug 02 '15 at 03:59
oh, I remember reading somewhere a way to do it... let me do some research. You'll have your answer in 12 hours. – www139 Aug 02 '15 at 04:00
I have tried methods from http://phrogz.net/css/vertical-align/index.html and it doesn't work. I don't know, maybe it's not possible in my setup. – Barney Stinson Aug 02 '15 at 04:10

score 0 · Answer 2 · answered Aug 02 '15 at 04:12

Use a wrapper div.

.teamleft
{
position: absolute;
width:300px;  
height: 30px;
background-color: #25335a;
}
.teamleft:after
{
position:absolute;
width: 300px;
height: 30px;   
content: attr(data-content);
color:#fff;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.teamleft:hover:after
{
opacity:1;
}

#wrapper{background-color: #25335a;
    width:400px;
    height:200px;}
p{margin-left:50px;
top:calc(50% - 10px);
}

<div id="wrapper">
<p data-content="TEXT THAT NEEDS TO BE POSITIONED" class="teamleft">
</p>
</div>

score 0 · Answer 3 · answered Aug 02 '15 at 05:43

I got the content centered vertically and horizontally by wrapping .teamleft with another block element as a flex-container (.flexShell) and adding another class (.flexItem) to .teamleft. .flexItem properties allow it to be centered within it's new parent .flexShell.

DEMO

FULLSCREEN

HTML

<main class="flexShell">
    <div data-content="TEXT THAT IS POSITIONED DEAD CENTER! THIS ADDED TEXT IS TO TEST THE WIDTH AND WRAPPING CAPABILITIES" class="teamleft flexItem">
   </div>
</main>

CSS

References to the style properties used are provided in the comments.

/*=-=-[ RESET PROPERTIES ]-=-=*/
/* http://goo.gl/3ed2H */
html {
    box-sizing: border-box;
    font: 500 16px/1.5 Consolas;
}
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    border: 0;
}
/*=-=-[ FLEXBOX CLASSES ]-=-=*/
/* https://goo.gl/WySM2z */
.flexShell {
    display: flex;
    display: -webkit-flex;
    position: relative;
    overflow-y: none;
}
.flexItem {
    flex: 1 0 auto;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    overflow-y: none;
}
/*=-=-[ TEAMLEFT ]-=-=*/
.teamleft {
    position: absolute;
    width: 50vw;           /* http://goo.gl/DkXR5F */
    height: 100vh;
    background-color: #25335a;
}
.teamleft:after {
    position: absolute;
    left: 25%;             /* https://goo.gl/S1mNoN */
    top: 50%;
    content: attr(data-content);
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    text-align: center;
    width: 50%;             
    background-color: transparent;
    display: table-cell;      /* https://goo.gl/lzmCyg */
    overflow-y: none;        /* https://goo.gl/o1Oqbf */
}
.teamleft:hover:after {
    opacity: 1;
}

Data-content text styling and positioning

3 Answers3

HTML

CSS