• ベストアンサー

CSS サイト プログラム

https://qiita.com/junya/items/4805404624292401030d ここにプログラムをコピペしてやってみたんですがサイトの通りに動きません。 なぜでしょうか。このサイトが古いのでしょうか? 誰か原因を教えてください。

  • CSS
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • t_ohta
  • ベストアンサー率38% (5085/13293)
回答No.1

サンプル通り動きますよ。 .text:hover で下線の要素が width: 100% と指定されていますから、マウスカーソルをテキスト部分に重ねないと下線は出ませんよ。

関連するQ&A

  • プログラム CSS3 アニメーション

    .text{ position: relative; display: inline-block; font-size: 2em; } .text:before{ position: absolute; top: 1.3em; left: 0; content: ""; display: inline-block; width: 0; height: 2px; background: #34BBF3; transition: 2s; } .text:hover:before{ width: 100%; } このプログラムはhttps://qiita.com/junya/items/4805404624292401030dからコピペしたCSS3のアニメーションを使ったアンダーラインのプログラムです。 このプログラムの四行目と九行目につかわれている「em」とはなんですか。

    • 締切済み
    • CSS
  • プログラム CSS3 アニメーション

    .text{ position: relative; display: inline-block; font-size: 2em; } .text:before{ position: absolute; top: 1.3em; left: 0; content: ""; display: inline-block; width: 0; height: 2px; background: #34BBF3; transition: 2s; } .text:hover:before{ width: 100%; } このプログラムはhttps://qiita.com/junya/items/4805404624292401030dからコピペしたCSS3のアニメーションを使ったアンダーラインのプログラムです。 このプログラムの十一行目の「content: "";」はどうして何も書かないんですか。 これをかいて何の意味があるんでしょう。

    • 締切済み
    • CSS
  • CSS after before

    .text{ position: relative; display: inline-block; font-size: 2em; } .text:before{ position: absolute; top: 1.3em; left: 0; content: ""; display: inline-block; width: 0; height: 2px; background: #34BBF3; transition: 2s; } .text:hover:before{ width: 100%; } このプログラムはhttps://qiita.com/junya/items/4805404624292401030dからコピペしたCSS3のアニメーションを使ったアンダーラインのプログラムです。 このプログラムの上から七行目に使われている before なんですが before はこのプログラムではどういゆ役割(仕事)なんですか。なぜ before なんでしょうか。

    • ベストアンサー
    • CSS
  • CSS 座標

    .text{ position: relative; display: inline-block; font-size: 2em; } .text:before{ position: absolute; top: 1.3em; left: 0; content: ""; display: inline-block; width: 0; height: 2px; background: #34BBF3; transition: 2s; } .text:hover:before{ width: 100%; } このプログラムはhttps://qiita.com/junya/items/4805404624292401030dからコピペしたCSS3のアニメーションを使ったアンダーラインのプログラムです。 このプログラムの上から九行目の「em」を使っているところ。 「em」について調べてみましたが、font-size で使うときの説明しか出てきません。なぜ「em」が座標指定の時に使われるのでしょうか。そしてどうして 上にコピペしてあるプログラムのように書いたとき、なぜ文字の下に線出てくるんでしょうか。 詳しく教えてください。

    • ベストアンサー
    • CSS
  • win10 ユーザーフォルダ名の変更

    ユーザーフォルダー名を漢字にしてしまったために面倒なことになっています。 あらたなユーザーを追加せずに変更できそうなやりかた以下で見つけたのですが 途中から言っていることがわかりません。 以下のサイトの手順2を素人がわかるようにどなたかご説明いただけないでしょうか? 何卒、よろしくお願いします。 https://qiita.com/aaaKUKIaaa/items/83d6234b69b0d958d3f1

  • VMwareのプロダクトキー

    Win11のPCでWin10をVMwareで使いたいと思っています。 友達が使い方をざっと教えてくれたのですが、あまりにも彼が機械慣れしすぎていて説明を聞いても全然わからなかったので質問します。 彼が言うには、Win10は無償だからプロダクトキーはいらないみたいなことを言うんですが、調べると https://qiita.com/qiita_mona/items/066d8f662409dd84c0d3 こちらのサイトでわかりづらく「プロダクトキーを手元に用意しましょう」と言っていますし、 実際インストールしている過程でプロダクトキーを求められました。 Win10のプロダクトキーとはなんなのでしょうか。 お願いします・・。

  • MMDで使用したいモデル(dae.)について

    https://www.models-resource.com/ こちらのサイトからモデルさんをダウンロードして使わせて頂きたいと思ったのですが、いざダウンロードして解凍してみるとdae.というファイル形式でPMXエディタでは開けませんでした。 片っ端から3Dを扱えるソフト(toystudio blender maya等)試してみたのですがどうやら対応していないようでこちらに質問させて頂きます。 mayaではpmx.に変換できるスクリプト(https://qiita.com/phyblas/items/53161a1d83ec3d81f649)をDLし実行したのですがエラーが出てしまい分からずじまいです...。 どうかお力添え頂けたら嬉しいです。

  • gitconfigのプロキシ例外設定

    Windows serverでGit for Windowsを使っています。 特定のリポジトリのアクセスだけプロキシサーバを使う設定にしたいです。 https://qiita.com/emudome/items/2e7942104d66d59fd577 を拝見しましたが、 同じようなURLを1つ1つ設定するのは大変なので、 https://*.hoge.com/* のようなワイルカードでの設定はできないのでしょうか? 以上よろしくお願いいたします。

  • ExcelVBAのクラスについて、解説願います

    先ずは此方をご覧ください qiita.com/lazynick/items/cce87d3194d737441161 クラスの書き方 に、ついて 示しているページ です 他は 割りと解る の、です が、 Class_Terminate() 此が、 何処からも 参照されていない 其のように 見えます 上位、下位、の クラス への、関連付け も、 私では、見えません 此は 何をしている の、ですか? 宜しく、お願い致します。

  • アンドロイドスタジオ Activityとは?

    アンドロイドスタジオにおいて「 Activity 」とはどのような意味合いを持つのでしょうか? Activityは活発という意味だと思うのですがアンドロイドスタジオにおいては、よく使うファイルみたいな認識で良いのでしょうか? 参考URL http://qiita.com/m2mtu/items/ac0d61e884519a4c61bb