Here is the CSS code I wrote to center align my text with a bottom border:
.arrow-down {
width: 2rem;
display: inline;
position: absolute;
top: -0.6rem;
left: 50%;
margin-left: -59px;
background: $grey_200;
z-index: 5;
}
.showless > section {
width: 100%;
text-align: center;
border-bottom: 0.1rem solid $grey_300;
line-height: 0.1em;
margin: 1rem 0 2rem;
background: $grey_200;
}
.showless > span {
width: 6rem;
margin-right: -5.6rem;
right: 56%;
position: absolute;
top: 0;
background: $grey_200;
padding: 0 10px;
}
.showless {
position: relative;
}
.content {
overflow: hidden;
transition: all linear 0.5s;
-webkit-transition: all linear 0.5s;
}
.trigger {
display: inline-block;
cursor: pointer;
position: relative;
}
This is my HTML code:
<div class="showless">
<div ng-transclude class="content" ng-style="style">
</div>
<section class="trigger" ng-if="showSection" ng-click="toggleMore($event)">
<i class="arrow-down"></i>
<span>{{more ? "More":"Less"}}</span>
</section>
</div>The alignment of the down arrow and More text appear off-center. Any suggestions on how to bring them to the center?