CODEWITHSUNDEEP
css
Matti
Matti

Reputation: 259

css text-indent equivalent on the right side

I have right-side aligned text and I want it to push it a little bit left like you do with text-indent bur on the right side. Any solution with that? I've been trying with margin, but IE9 doubles the margin on the first menu item (?).

Heres the css:

h99
{ padding: 0px;
    font-family: lucida, sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 40px;
}

#menublock
{ width: 230px;
    height: auto;
    float: left;
    text-align:right;
    margin-right: 0px;
}

ul
{ list-style-type: none;
  margin:0;
  padding:0;
  overflow: hidden;
}

ul a:link, ul a:visited
{ display: block;
  width: 210px;
  background: transparent;
  text-align: right;
  text-transform: uppercase;
  text-decoration: none;
    height: 40px;
    color: #ffffff;
    padding: 0px;
    margin: 10px;
}

ul a:hover, .selected
{ background: #484848 !important;
  color: #ffffff !important;
}

The menu is a simply horizontal one.

Upvotes: 24

Views: 32647

Answers (6)

nesinervink
nesinervink

Reputation: 420

CSS only solution, does not mess with text direction (SEO and translation friendly?), no floats, no additional elements, width of post-indent is easy to modify:

&::after {
    content: "\0000a0";
    height: 1em;
    letter-spacing: 1rem;
}

Upvotes: 3

aWebDeveloper
aWebDeveloper

Reputation: 38402

Do the following 

text-indent: 60px;
direction: rtl;
text-align: left;

f.ardelian pointed out: Punctuation will appear at the beginning of the line so abc. will appear .abc

Upvotes: 3

Aedan
Aedan

Reputation: 109

Simple solution is to apply a "before" CSS style to your text element which negates all side effects of direction: rtl;

&:before {
      content: ' ';
      width: 100px;
      float: right;
      height: 5px;
}

Upvotes: 10

Guido
Guido

Reputation: 29

What I did and worked for me was this: 

text-indent: 20px;
padding-right: 40px;

Upvotes: 2

Cyber
Cyber

Reputation: 382

There is none, unfortunately there is no text outdent in css, hower, you could use text direction direction:rtl; for some short texts, in that way indent will appear on the other side.

Upvotes: 15

Outcast
Outcast

Reputation: 99

I would need to see your code however a solution to your problem with old browsers is to include an empty span and apply a width:

<style>
span.right-adjust {
  display:inline-block;
  width:5px;
}
</style>

<div>Your text here<span class="right-adjust"></span></div>

It is hard to tell what you want without providing us with code. You could also apply a float:right;

There are many ways to solve issues with old browsers and CSS.

Hope this helps

Upvotes: 0

Related Questions