疑似要素beforeと同じ効果を別のタグなどに持たせることって可能でしょうか？

Question

初めて質問させて頂いています。
ただ今とあるサイトのリニューアルをお手伝いさせて頂いており、そこで発生した問題についてお答えいただければと思っております。
今回h1タグをリニューアルするとともに、今まで画像だったものをCSSで再度作ることになりました。
今回先方に頂いた指令が

・IE7～対応できるようにする
・以下のようにはできるだけしない（wordpressで作成しておりますので、すでにh1を使用した記事が多数あり、これから新たに別のタグを付け直すことが困難な為）

<h1>あいうえおかきくけこ</h1> ↓ <h1><span>あいうえおかきくけこ</span></h1>

・タイトルが二行以上になることもあるので、行数に対し常に変動できるよう高さはautoにする

そもそもIE7対応ですと疑似要素も使えないためどうしたらよいかわかりません…。
何かいい対策がございましたら、ご教授願えませんでしょうか。
どうぞよろしくお願い致します。

h1タグの文章の前には（恐らくborder-leftでできるような）棒線がありこちらも行数によって変わるようにしたいです。

Answer 1

▼IE7でも擬似要素
IE9.js

▼高さ可変の見出し冒頭にライン
画像を使わずCSSだけで実現。使用頻度が高い見出しデザイン。
※その１のデザインを応用すればできると思います。

上記の見出し冒頭ラインはcalc()を使っていますので、
calc()非対応のブラウザでも高さを取得する必要があります。
試していませんが、こちらの記事を参考に、jQueryで動的にスタイルを指定するなどすればもしかしたらうまくいくかもしれません。

Comments

[pikachuchuchu]

お返事ありがとうございます。
IE9.jsというJavaScriptの存在は知りませんでした！
ご教授誠にありがとうございます！
早速試してみます！

Answer 2

要素内のtextをタグで囲むjQuery - CodePen
書いて見ました。

質問者さまのやりたかったのは

<h1>テキストテキストテキスト</h1>

をどうにかして

<h1><span>テキストテキストテキスト</span></h1>

にした上でspanにborder-leftを持たせることだと思うのですが、
spanの場合自動で改行された時にborderの高さが連動しないためdiv要素で囲ってみました。

Comments

[pikachuchuchu]

お返事ありがとうございます！遅くなってしまい誠に申し訳ございません。
大変恐縮なのですが今回<span>が利用不可なため上記のようにコードを書くことができません…。<span>が使えれば是非行ってみたいのですが…!
お忙しい中お手数をおかけしてしまい誠に申し訳ございません！
本当にありがとうございました！

Answer 3

↓これがそもそも ::beforeや::after では出来ないことなので、何を実現できなくてお困りかよくわかりません。

<h1>あいうえおかきくけこ</h1>   
↓   
<h1><span>あいうえおかきくけこ</span></h1>

(↓::beforeや::afterで出来るのはこれに近いです。要素内の最初か最後に要素を追加します。)

<h1>
    <span>::before 要素</span>
    あいうえおかきくけこ
    <span>::after 要素</span>
</h1>

添付の図だけ見る限りは margin, padding, border を使えばできますが、
::beforeや::afterが使えないと何ができないのでしょうか。

追記

CSS に拘るより JavaScript のほうが結局シンプルである例は多いです。
jQuery 依存ですがこんなのはどうでしょうか。

$("h1").prepend($("<span/>", {CLASS: "h1-inner-border"}));

結果

<h1>
    <span class="h1-inner-border"></span>
    あいうえおかきくけこ
</h1>

あとはスタイルシートなりでどうにでも。

Comments

[tozjp]

あ、失礼しました。
外側の枠が認識外でした。枠あり＋中に太い線ということで擬似要素を使いたいということでしたか？

[pikachuchuchu]

お返事ありがとうございます！
枠あり+中に太い線という仕様なので今回疑似要素を使いたかったのです。しかも今回はhタグしか使えないので、疑似要素以外で中の太い線を制作する方法がわからずご質問させて頂いた次第でございます。

[tozjp]

わかりました。追記をご参照ください。

[pikachuchuchu]

ご連絡遅くなってしまい申し訳ございません。
すごくわかりやすい書き方で教えてくださり、大変うれしく思います。しかし、今回<span>が使用不可なためご回答いただいた方法でできずすごく歯がゆく思います。
やはり<span>で囲まなければ難しそうですよね…。
本当にご回答くださりありがとうございました！

Answer 4

そもそもの解決に繋がるかは試していないのでわかりませんが、jQueryのプラグインを使うのはどうでしょうか。

jQuery Pseudo Plugin

また、こちらのサイトが参考になるかと思います。

IE7でCSSの疑似要素「:after」「:before」を使う

Comments

[pikachuchuchu]

お返事ありがとうございます！この質問をした者です。
こちらのプラグインは一度試したのですが、うまくいきませんでした…
私の認識が間違っている可能性は大なのですがこちらのjQueryは疑似要素のbeforeに付随するcontent("");の中のものを強制的にIE7で閲覧可能にしてくれるものだと思っております。
今回content("");の中には何も入っておりませんので、動かなかったのだと思います…
違っていたらすみません><
ご連絡大変感謝しております!!