金額を入力するフォームの場合、inputタグの後に円と表示させる場合があると思いますが、なんかいまいちダサいし、もっとスマートに出来ないかなと思って試した例です。

具体例

こんな感じ。

コード

• 上の方

  <div class="input-mark" style="width: 180px;">
    <input  type="text" id="test-text">
    <span class="mark-text">@hoge.com</span>
  </div>

• 下の方

  <div class="input-mark" style="width: 60px;">
    <input  type="text" id="test-num">
    <span class="mark-text">円</span>
  </div>

• CSS

  /* === Form ================================= */
  
  input[type="text"] {
    border-style: solid;
    border-width:  1px;
    border-color: #c9c9c9;
    color: #333333;
    font-size: 100%;
    line-height: 1em;
    height: 1em;
  }
  
  /* === InputMark ================================= */
  
  /* 入力フォームの背景に表示する文字列のスタイル */
  
  .input-mark {
    position: relative;
  }
  
  .input-mark input[type="text"], {
    width: 100%;
    padding: 5px;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: transparent;
  }
  
  .input-mark span.mark-text {
    width: 100%;
    padding: 6px 5px;
    text-align: right;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    color: #888888;
    background-color: #ffffff;
    line-height: 1em;
    height: 1em;
  }

CSSはプロパティ名で並んでなくて見苦しいですが、こんな感じです。

大雑把な解説

positionプロパティを使用して、inputタグとspanタグを同一の位置に移動させています。
.input-mark input[type="text"]に対しては、本当はpositionで移動させる必要なないのですが、z-indexの指定の都合上こういう指定になっています。

上記の例では柔軟性の問題で、widthはdiv.input-markのstyle属性で決めていますが、CSS側で指定しても構いません。
あまりバラバラなサイズにしても統一感を欠くので、数パターンで決めて置くのも良いかと思います。

paddigの指定

例では、.input-mark input[type="text"]の上下のpaddingは5pxですが、.input-mark span.mark-textでは6pxになっています。
これは、inputに対する枠の領域を考慮しているからです。

line-heightとheightの指定

例では、ともに1eｍの指定となっていますが、適当な任意の値にしても構いません。
ですが、両者とも設定しないとブラウザ間でinputとspanの内容の位置ズレが起こるようになります。

inputに対するbackgroundの設定

この例では、inputの下にspanが配置されています。そのままではinputに隠されてしまいspanの内容が見えなくなるので、background-colorプロパティにtransparentを指定して背景色を透過させています。
z-indexを逆にして、inputの上にspanを来るようにすると表示上は問題ないのですが、inputにフォーカス出来ず入力が出来なくなってしまいます。